Как я могу изменить шрифт и размер шрифта вида сетки при изменении фокуса / выделения

Question

В UWP я создаю Gridview, который содержит буквы. (например, A B C D E F G ... Z), когда пользователь перемещается в Gridview, я хотел бы изменить шрифт (и размер) выбранной / выделенной буквы. Я хотел бы иметь возможность сделать это через XAML, если это возможно, но я не могу заставить его работать.

Некоторый фон: Я создал DataTemplate для представления моих писем (у меня есть 2 шаблона данных, один для разрешенных букв и один для запрещенных букв), и я использую ItemTemplateSelector и привязку данных для визуализации списка писем.
У меня есть LetterModel, который представляет букву и ее состояние, так что при загрузке страницы некоторые отключенные буквы выглядят по-разному, и эти элементы отключаются в виде сетки. Теперь я хотел бы иметь возможность изменить шрифт и размер шрифта с помощью стиля LIstViewPresenter (если это вообще возможно).

Некоторые коды:

Письмо Модель:

public class LetterModel
{
    public string Letter { get; set; }
    public bool IsEnabled { get; set; }
}

Шаблоны данных XAML (содержится в файле ресурсов вместе с переопределениями стиля GridViewItem, которые я реализовал):

    <helpers:LetterSelector x:Key="alphabetSelector" EnabledTemplate="{StaticResource LetterEnabled}" DisabledTemplate="{StaticResource LetterEnabled}"/>

    <DataTemplate x:Name="LetterEnabled">
        <TextBlock x:Name="myLetter" Text="{Binding Letter}" Style="{StaticResource LetterTextStyle}" FontSize="24"/>
    </DataTemplate>

    <DataTemplate x:Name="LetterDisabled">
        <TextBlock x:Name="myLetter" Text="{Binding Letter}" Style="{StaticResource DisabledLetterTextStyle}" Foreground="{StaticResource MyColor}" FontSize="24"/>
    </DataTemplate>

Объявление GridView на странице:

<GridView x:Name="alphaGrid" Width="Auto" Height="Auto" 
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch" Margin="22, 0, 22, 0" 
    SelectionChanged="AlphaGrid_SelectionChanged"
    ItemsSource="{x:Bind MyViewModel.Letters}"
    ItemTemplateSelector="{StaticResource alphabetSelector}"
    ItemContainerStyle="{StaticResource LetterSelectionGridViewStyle}">

Вот мой LetterSelectionGridViewStyle:

<Style x:Key="LetterSelectionGridViewStyle" TargetType="GridViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource GridViewItemForeground}"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,0,6,6"/>
        <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
        <Setter Property="AllowDrop" Value="False"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin" Value="-2,-2,-2,-6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <ListViewItemPresenter x:Name="Root" CheckBrush="{ThemeResource GridViewItemCheckBrush}"
                                           ContentMargin="{TemplateBinding Padding}"
                                           CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
                                           ContentTransitions="{TemplateBinding ContentTransitions}"
                                           CheckMode="{ThemeResource GridViewItemCheckMode}"
                                           DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                           DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                           DragBackground="{ThemeResource GridViewItemDragBackground}"
                                           DragForeground="{ThemeResource GridViewItemDragForeground}"
                                           FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
                                           FocusVisualPrimaryBrush="{StaticResource MyOrange}"
                                           FocusVisualPrimaryThickness="0,0,0,8"
                                           FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                                           FocusSecondaryBorderBrush="{ThemeResource GridViewItemFocusSecondaryBorderBrush}"
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           Control.IsTemplateFocusTarget="True"
                                           PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
                                           PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
                                           PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
                                           PointerOverBackground="{ThemeResource GridViewItemBackgroundPointerOver}"
                                           RevealBorderThickness="{ThemeResource GridViewItemRevealBorderThemeThickness}"
                                           ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                                           RevealBorderBrush="{ThemeResource GridViewItemRevealBorderBrush}"
                                           RevealBackground="{ThemeResource GridViewItemRevealBackground}"
                                           SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
                                           SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}"
                                           SelectedBackground="{ThemeResource SystemControlTransparentBrush}"
                                           SelectedPressedBackground="{ThemeResource SystemControlTransparentBrush}"
                                           SelectedPointerOverBackground="{ThemeResource SystemControlTransparentBrush}"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Selected"/>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled"/>
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Root.RevealBorderThickness" Value="0"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ListViewItemPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

В идеале я бы мог сделать что-то в VisualStateGroups, которое понимает выбранное / невыбранное поведение, и я мог бы изменить свойства FontSize в моей таблице данных

Или я просто что-то здесь неправильно понимаю?

Я попытался использовать поведения в моем DataTemplate, однако это изменило все шрифты буквы ... а не только выбранные.

Я потратил много времени, пытаясь понять, должно ли это быть выполнимо в XAML.

Спасибо!

Answer 1

Если вы установите FontSize=24 в своем шаблоне данных, то размер шрифта, примененный к «ListViewItemPresenter», не будет работать.

Таким образом, если вы хотите изменить размер шрифта, когда GridViewItem выбран в визуальном состоянии, вам необходимо удалить FontSize=24 в вашем шаблоне данных и изменить размер шрифта в визуальном состоянии «Выбранный» напрямую.

<VisualState x:Name="Selected">
     <VisualState.Setters>
          <Setter Target="Root.FontSize" Value="50"></Setter>
     </VisualState.Setters>
</VisualState>