VisualStateManager je velmi užitečný při sestavování XAML designu. Spolu s AdaptiveTriggery v UWP umožňuje snadno přecházet mezi jednotlivými stavy rozložení tak, aby aplikace vypadala skvěle na každém displeji. Měli bychom si však dát pozor na dva nenápadné problémy, na které v souvislosti s touto třídou můžeme narazit.

Chyták 1: Umístění VisualStateMangeru

Vezměme následující úryvek kódu:

<UserControl ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TargetText.Text" Value="This is never applied :-(" />
                    <Setter Target="Button.Background" Value="Red" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Button x:Name="Button">
        <TextBlock x:Name="TargetText" Text="VisualStateManager in root" />
    </Button>
</UserControl>

Pokud tento kód zkusíte použít, zjistíte, že stav není nikdy aktivován (text u elementu TextBlock  se nezmění, když je okno širší než 700 obrazových bodů).

Důvodem je fakt, že VisualStateManager  nemůže být připojen k hlavnímu elementu XAML layoutu (Page , UserControl , …), ale musí být uvnitř nějakého ovladacího prvku nebo panelu. Nejčastěji se VisualStateManager  umisťuje do hlavního Content  UI elementu:

<UserControl ...>
    <Button>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="700" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="TargetText.Text" Value="Adaptive trigger applied!" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock x:Name="TargetText" Text="VisualStateManager inside root Grid" />
    </Button>
</UserControl>

Chyták 2: Neplatné settery

Uvažujme následující kód:

<UserControl ...>
    <Button>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="700" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="TargetText.Text" Value="This is never applied because the other Setter has invalid syntax" />
                        <Setter Target="TargetText.Foregroun" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock x:Name="TargetText" Text="VisualStateManager with invalid setter" Foreground="Black" />
    </Button>
</UserControl>

Na první pohled vypadá vše v pořádku. Na druhý ale zjistíme, že druhý setter obsahuje nevinnou chybu v Targetu  Setteru  pro TargetText.Foreground. Pravděpodobně očekáváte, že tento problém se projeví nejpozději za běhu aplikace jako výjimka. Překvapivě tomu tak ale není.

Když Target  nebo Value  kteréhokoliv Setteru  nejsou platné, aplikace i přesto poběží bez výjimek, ale daný VisualState  obsahující tento Setter   nebude nikdy aplikován. V tomto konkrétním případě nebude nastavena ani vlastnost Foreground  ani vlastnost Text  .

Kdykoliv narazíte na VisualState , který se zdá nefunkční, zkontrolujte pro jistotu, zda všechny  Settery  jsou skutečně správně. Můžete také zkusit zakomentovat celý blok Setters  a poté postupně jeden po druhém odkomentovávat, dokud nedorazíte na viníka.

Zdrojový kód

Zdrojový kód pro tento příspěvek najdete na mém GitHubu.

Summary

VisualStateManager  je velmi užitečný a výrazně zjednodušuje vytváření komplexního adaptivního designu. Musíme však dát pozor, abychom jej používali správně, alespoň do té doby než Visual Studio XAML editor dostane podporu IntelliSense pro Target  and Value u Setterů .