【发布时间】: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 中是否可行。
谢谢!
【问题讨论】: