Flyout上的VisualStateManager不突出显示整个区域

时间:2016-03-03 04:20:33

标签: c# xaml win-universal-app

我有一个VisualStateManager,当指针在项目上时控制背景颜色。问题是,它不会突出整个区域,只是文本和图标周围的一小部分。这是我的代码:

Not fully highlighted

<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>

编辑:

感谢大家的回答。我会尽可能地研究这些解决方案;我最终做了一些不同的事情 - 使区域变大,这样你就可以通过添加填充来看到亮点。这不是我想要的,这就是为什么我会研究这些。

2 个答案:

答案 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的大小。

enter image description here

在实时视觉树中选择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>