Search code examples
xamluwpvisualstatemanager

few question on Xaml Visualstate created by Copied Template in UWP

I have few question about visualstate created by copied Template in UWP.
I just make NavigationView, following is source code of it. 

<NavigationView Style="{StaticResource NavigationViewStyle1}"
    x:Name="navigationView"
    SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
    Header="{x:Bind ViewModel.Selected.Content, Mode=OneWay}"
    IsSettingsVisible="False"
    Background="{ThemeResource SystemControlBackgroundAltHighBrush}"> ..omitted

and I right clicked NavigationView on design view, and cliked Edit Template and clicked edit copy(unsure for name of it, because my visual studio shows in Korean).

As you know, then It creates design Dictionary. I'm trying to be familiar with this by editing some parts of this. And then, I've wondered that Why does TogglePaneButtonCollapsed visualstate group exist. I'll bring a example to help your understand.

First, I think I should write XAML code. I interested in TogglePaneButtonCollapsed VisualState of TogglePaneGroup. 

<Style x:Key="NavigationViewStyle1" TargetType="NavigationView">
    <Setter Property="PaneToggleButtonStyle"
            Value="{StaticResource PaneToggleButtonStyle}"/>
    <Setter Property="IsTabStop"
            Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationView">
                <Grid x:Name="RootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="DisplayModeGroup">
                            <VisualState x:Name="Compact"/>
                            <VisualState x:Name="Expanded">
                                <VisualState.Setters>
                                    <Setter Target="TogglePaneButton.Visibility" Value="Collapsed"/> <!-- I added-->
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Minimal">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Margin" Value="48,5,0,0"/>
                                    <Setter Target="TogglePaneButton.Visibility" Value="Collapsed"/> <!-- I added-->
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="MinimalWithBackButton">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Margin" Value="104,5,0,0"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="TogglePaneGroup">
                            <VisualState x:Name="TogglePaneButtonVisible">
                                <VisualState.Setters>
                                    <Setter Target="PaneContentGridToggleButtonRow.Height" Value="200"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="TogglePaneButtonCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="TogglePaneButton.Visibility" Value="Collapsed"/>
                                    <Setter Target="PaneContentGridToggleButtonRow.Height" Value="2000"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup> .. omitted

I wondered When does TogglePaneButtonCollapsed Work. I made windows size of App smaller and bigger, but none of Them Triggers Setters of TogglePaneButtonCollapsed("make Toggle ButtonRow. Height == 2000"). I added some code in Expaned and Minimal in DisplayModegroup to make TogglePaneButton Visibility Collapsed. But It only has 200 px Height as It defined in TogglePaneButtonVisible. not 2000 px Height.

200 px, not 2000 px

As I know, This dictionary file has no VisualState Trigger in it and VisualState Trigger code are hiding from developers, am I right?... and developer should comply with Name of Visualstate Group and VisualState.

then final question is, Why does TogglePaneButtonCollapsed Visual state exist, and How I use it without define Visual State Trigger? can I overload the trigger?. Thank you for reading my post.

Solution

  • This dictionary file has no VisualState Trigger in it and VisualState Trigger code are hiding from developers, am I right?... and developer should comply with Name of Visualstate Group and VisualState.

    Yes. The default visual state is controlled by itself (you could think of it as its code-behind, but since the UWP is not opensource, so you cannot see it). You cannot change its name or remove these default visual states.

    Why does TogglePaneButtonCollapsed Visual state exist, and How I use it without define Visual State Trigger? can I overload the trigger?. Thank you for reading my post.

    It's by design. You could use VisualStateManager.GoToState(Control, String, Boolean) Method to transform a control between two states.