在基于其他样式的样式上使用Visual State Manager

Question

用xaml编写代码，理解视觉状态管理器和使用样式一直很困难。

我一直在创建UWP应用，并主要使用C＃开发我的UI。但是，我想改用xaml，但是对标记语言没有经验。

我要实现的目的是创建一种基于“父”样式的样式，这种样式具有附加状态，主要是为了更改可见性。

这里是一个示例，我创建了一个默认样式的实例，该实例称为“ NavigationViewItemStyle”。然后，我有一些基于NavigationViewItemStyle的样式。我想做的是添加其他状态，这些状态可以在C＃中触发以更改控件的可见性。

下面是我的默认样式...只是一个简单的副本

      <Style x:Key="NavigationViewItemStyle" TargetType="NavigationViewItem">
            <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}"/>
            <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="NavigationViewItem">
                        <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Height="40" Control.IsTemplateFocusTarget="True">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="PointerStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPressed}"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelected}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverSelected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPointerOver}"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PressedSelected">
                                        <VisualState.Setters>
                                            <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed"/>
                                            <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}"/>
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}"/>
                                            <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled"/>
                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushCheckedDisabled}"/>
                                            <Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="IconStates">
                                    <VisualState x:Name="IconVisible"/>
                                    <VisualState x:Name="IconCollapsed">
                                        <VisualState.Setters>
                                            <Setter Target="IconBox.Visibility" Value="Collapsed"/>
                                            <Setter Target="IconColumn.Width" Value="16"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid HorizontalAlignment="Left" VerticalAlignment="Center">
                                <Rectangle x:Name="SelectionIndicator" Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}" Height="24" Opacity="0.0" Width="6"/>
                            </Grid>
                            <Border x:Name="RevealBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
                            <Grid x:Name="ContentGrid" HorizontalAlignment="Left" Height="40">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="IconColumn" Width="48"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ToolTipService.ToolTip>
                                    <ToolTip x:Name="ToolTip"/>
                                </ToolTipService.ToolTip>
                                <Viewbox x:Name="IconBox" Child="{TemplateBinding Icon}" Margin="16,12"/>
                                <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

然后我根据默认样式创建了自定义样式

<Style x:Key="HomeNavigationViewItemStyle" TargetType="NavigationViewItem" BasedOn="{StaticResource NavigationViewItemStyle}">
</Style>

我无法解决的是如何在自定义样式中包含其他状态以更改控件的可见性。

即我可以将应用程序置于4种不同的状态，并且根据状态，某些Navigationviewitem是可见的还是折叠的。

为了使事情变得容易

<VisualStateGroup x:Name="NavigationViewStates">
    <VisualState x:Name="NavigationViewState1">
        <VisualState.Setters>
            <Setter Target="Visibility" Value="Visible"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="NavigationViewState2">
        <VisualState.Setters>
            <Setter Target="Visibility" Value="Collapsed"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="NavigationViewState3">
        <VisualState.Setters>
            <Setter Target="Visibility" Value="Collapsed"/>
        </VisualState.Setters>
    </VisualState>
</VisualStateGroup>

但是不知道如何使它工作。...

有人可以帮助我或指引我正确的方向吗？

Answer 1

  

取决于所附加的样式，该项目是可见的还是折叠的

有一种简单的方法可以达到目标。您可以使用NavigationView.MenuItemContainerStyleSelector Property。您需要创建一个自定义样式选择器以对NavigationViewItem应用不同的样式，并且在代码隐藏（自定义样式选择器类）中，您可以根据项目显示/隐藏NavigationViewItem。通过这种方式，您无需使用视觉状态。

请参见以下代码以供参考：

<Page.Resources>
    <Style x:Key="s1" TargetType="NavigationViewItem">
        <Setter Property="Visibility" Value="Visible"></Setter>
    </Style>
    <Style x:Key="s2" TargetType="NavigationViewItem">
        <Setter Property="Visibility" Value="Collapsed"></Setter>
    </Style>
    <Style x:Key="s3" TargetType="NavigationViewItem">
        <Setter Property="Visibility" Value="Visible"></Setter>
    </Style>
    <local:CustomStyleSelector x:Key="customStyleSelector" style1="{StaticResource s1}" style2="{StaticResource s2}" style3="{StaticResource s3}"></local:CustomStyleSelector>
</Page.Resources>

<Grid>
    <NavigationView x:Name="NavView"
                IsSettingsVisible="True"
                Header="Welcome" MenuItemContainerStyleSelector="{StaticResource customStyleSelector}">
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Home" x:Name="home" Tag="home">
                <NavigationViewItem.Icon>
                    <FontIcon Glyph="&#xE10F;"/>
                </NavigationViewItem.Icon>
            </NavigationViewItem>
            <NavigationViewItem Icon="AllApps" Content="item1" x:Name="apps" Tag="apps"/>
            <NavigationViewItem Icon="Video" Content="item2" x:Name="games" Tag="games"/>
            <NavigationViewItem Icon="Audio" Content="item3" x:Name="music" Tag="music"/>
        </NavigationView.MenuItems>
    </NavigationView>
</Grid>

public class CustomStyleSelector: StyleSelector
{
    public Style style1 { get; set; }
    public Style style2 { get; set; }
    public Style style3 { get; set; }
    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        if (item is NavigationViewItem)
        {
            if ((item as NavigationViewItem).Content.ToString() == "item1")
            {
                return style1;
            }
            if ((item as NavigationViewItem).Content.ToString() == "item2")
            {
                return style2;
            }
            if ((item as NavigationViewItem).Content.ToString() == "item3")
            {
                return style3;
            }
        }
        return base.SelectStyleCore(item, container);
    }
}