我有一个VisualStateManager,当指针在项目上时控制背景颜色。问题是,它不会突出整个区域,只是文本和图标周围的一小部分。这是我的代码:
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Click="DeleteMenuItemClick">
<MenuFlyoutItem.Template>
<ControlTemplate TargetType="MenuFlyoutItem">
<Grid>
<StackPanel Orientation="Horizontal" Padding="0">
<SymbolIcon Symbol="Delete" Margin="10,0" />
<TextBlock Text="{TemplateBinding Text}" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="PointerOver"
GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Flyout"
Storyboard.TargetProperty="Color"
To="{StaticResource SystemAltHighColor}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<SolidColorBrush x:Name="Flyout"
Color="{TemplateBinding Background}">
</SolidColorBrush>
</Grid.Background>
</Grid>
</ControlTemplate>
</MenuFlyoutItem.Template>
</MenuFlyoutItem>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
编辑:
感谢大家的回答。我会尽可能地研究这些解决方案;我最终做了一些不同的事情 - 使区域变大,这样你就可以通过添加填充来看到亮点。这不是我想要的,这就是为什么我会研究这些。
答案 0 :(得分:0)
编辑MenuFlyout的样式,你将实现你想要的, 我会做那样的事情
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyout.MenuFlyoutPresenterStyle>
<Style TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="Transparent"/>
</Style>
</MenuFlyout.MenuFlyoutPresenterStyle>
<MenuFlyoutItem Text="Delete" Click="DeleteMenuItemClick">
<MenuFlyoutItem.Template>
<ControlTemplate TargetType="MenuFlyoutItem">
<Grid>
<StackPanel Orientation="Horizontal" Padding="0">
<SymbolIcon Symbol="Delete" Margin="10,0" />
<TextBlock Text="{TemplateBinding Text}" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="PointerOver" GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Flyout" Storyboard.TargetProperty="Color" To="{StaticResource SystemAltHighColor}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Background>
<SolidColorBrush x:Name="Flyout" Color="{TemplateBinding Background}"></SolidColorBrush>
</Grid.Background>
</Grid>
</ControlTemplate>
</MenuFlyoutItem.Template>
</MenuFlyoutItem>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
答案 1 :(得分:0)
它不会突出显示整个区域,因为您在MenuFlyoutItem
中使用了视觉状态,而突出显示区域是MenuFlyoutItem
的区域。
您可以在Visual Studio的实时可视树中看到这一点。要清楚地看到这一点,我们可以在模拟器中运行该应用,并在实时视觉树中检查“在正在运行的应用程序中显示布局装饰”。然后你会看到MenuFlyoutItem
的大小。
在实时视觉树中选择MenuFlyoutItem
时,其区域将为蓝色。我的图片中不清楚,你可以亲自试试。
因此要突出显示整个区域,我们需要让MenuFlyoutItem
填满MenuFlyoutPresenter
并执行此操作,我们需要通过设置MenuFlyout
来修改MenuFlyoutPresenterStyle
的样式。您可以在MenuFlyoutPresenter styles and templates找到默认的MenuFlyoutPresenter
样式。
要设置MenuFlyoutPresenterStyle
,我们可以从网站或Visual Studio中复制默认样式,在“文档大纲”中选择“ [MenuFlyout] ”然后右键单击,然后选择“编辑其他模板”→“编辑MenuFlyoutPresenterStyle ”→“编辑副本... ”。
在样式中,我们需要将Margin
中的ItemsPresenter
设置为0
<ItemsPresenter Margin="0"/>
然后MenuFlyoutItem
周围没有边距。但这还不够,因为MenuFlyoutPresenter
的高度为32分钟:
<x:Double x:Key="MenuFlyoutThemeMinHeight">32</x:Double>
如果MenuFlyoutItem
的高度小于32,则也无法突出显示整个区域。要解决此问题,您可以将MinHeight
属性设置为0
。
<Setter Property="MinHeight" Value="0"/>
或者在MenuFlyoutItem
中增加设置Margin
StackPanel
的高度:
<StackPanel Orientation="Horizontal" Margin="0,8">
<SymbolIcon Margin="10,0" Symbol="Delete" />
<TextBlock Text="{TemplateBinding Text}" />
</StackPanel>
完整的MenuFlyoutPresenterStyle可能如下:
<Style x:Key="MyMenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}" />
<Setter Property="Padding" Value="{ThemeResource MenuFlyoutPresenterThemePadding}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<Grid Background="{TemplateBinding Background}">
<ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" MinWidth="{Binding TemplateSettings.FlyoutContentMinWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter Margin="0" />
</ScrollViewer>
<Border x:Name="MenuFlyoutPresenterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>