Использование Visual State Manager для стиля, основанного на другом стиле

Question

У меня было много трудностей с написанием на xaml, пониманием менеджера визуальных состояний и использованием стилей.

Я создавал приложение UWP и в основном использовал C # для разработки своего пользовательского интерфейса.Тем не менее, я хотел перейти на использование 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>

IЗатем я создал собственный стиль на основе моего стиля по умолчанию

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

Что я не могу понять, так это то, как я включаю дополнительные состояния в свой собственный стиль, чтобы изменить видимость элемента управления.

Т.е. у меня есть 4 различных состояния, в которых может находиться приложение, и в зависимости от состояния определенные элементы viewview либо видны, либо свернуты.

Чтобы упростить задачу, я хочу

<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 Свойство .Вам нужно создать собственный селектор стилей, чтобы применить другой стиль для 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);
    }
}