【问题标题】:How can I change the font and font size of a gridview as focus/selection changes如何在焦点/选择更改时更改网格视图的字体和字体大小
【发布时间】:2019-10-31 06:41:41
【问题描述】:

在 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 中是否可行。

谢谢!

【问题讨论】:

    标签: xaml gridview uwp


    【解决方案1】:

    如果您在 DataTemplate 中设置 FontSize=24,则应用于“ListViewItemPresenter”的字体大小将不起作用。

    所以,如果你想在视觉状态下选择GridViewItem时改变字体大小,你需要删除DataTemplate中的FontSize=24,直接在'Selected'视觉状态下改变字体大小。

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

    【讨论】:

    • 谢谢泽维尔!这正是我所缺少的。我将字体大小移动到选定区域和正常区域,现在我有了我正在寻找的行为。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-02-25
    • 1970-01-01
    • 2011-06-14
    • 1970-01-01
    • 2011-04-05
    • 2017-11-13
    • 2011-06-25
    相关资源
    最近更新 更多