如何在混合中编辑控件浮出控件的样式

Posted 2023-02-22

【中文标题】如何在混合中编辑控件浮出控件的样式

【英文标题】：How do I edit the style of a controls flyout in blend

【发布时间】：2016-02-03 11:46:35

【问题描述】：

我需要编辑按钮浮出控件的设计，但找不到对浮出控件的引用。在 Blend Object-Explorer 中，我根本找不到任何弹出窗口：

那么访问浮出控件的诀窍是什么。我看到 UWP 中有一个特殊的 TimePickerFlyout 类 https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.timepickerflyout.aspx，但是如果我在模板或项目代码中搜索它，我发现的唯一东西是模板资源中的 TimePickerFlyoutButtonStyle，据我了解，它包含故事板信​​息按钮外观。

<StackPanel.Resources>
    <Style x:Key="TimePickerFlyoutButtonStyle" TargetType="Button">
        <Setter Property="UseSystemFocusVisuals" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="TemplateBinding Background">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseMediumBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlPageBackgroundAltMediumBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseHighBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlBackgroundBaseLowBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseMediumLowBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightBaseHighBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlBackgroundBaseLowBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlDisabledBaseLowBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlDisabledBaseMediumLowBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightListAccentLowBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="ThemeResource SystemControlHighlightAltBaseHighBrush"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="ThemeResource SystemControlForegroundBaseMediumLowBrush" BorderThickness="2" Background="ThemeResource SystemControlBackgroundAltMediumLowBrush" Content="TemplateBinding Content" Foreground="TemplateBinding Foreground" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</StackPanel.Resources>

【问题讨论】：

不确定我是否完全理解这个问题。你有一个按钮，你希望它的弹出窗口包含一个时间选择器？在这种情况下，您应该首先单击“添加浮出控件”选项，然后对其进行编辑

不，我有一个 TimePicker（这是一个打开 TimePickerFlyout 的按钮），我想编辑我找不到的相关 Flyout。不在样式内，也不作为引用样式。

我现在明白了。在您在底部附近发布的TimePickerFlyoutButtonStyle 中，您会找到一个 ContentPresenter。应该是这个 ContentPresenter 持有时间选择器的 UI。尝试编辑它的模板或样式。我现在不在 Windows 10 电脑上亲自尝试。如果你不解决，我明天再看看。

【参考方案1】：

我做了以下更改 TimePickerFlyout 的背景颜色和页脚按钮的大小。

导航至 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic 请注意，这可能会因您的 SDK 版本而异

李>

打开 generic.xaml 文件

将 TargetType="TimePickerFlyoutPresenter" 部分复制到您的 Assets\ControlStyles.xaml

这是来自 generic.xaml 文件的 xaml...

<!-- Default style for Windows.UI.Xaml.Controls.TimePickerFlyoutPresenter -->
<Style TargetType="TimePickerFlyoutPresenter">
    <Setter Property="Width" Value="242" />
    <Setter Property="MinWidth" Value="242" />
    <Setter Property="MaxHeight" Value="396" />
    <Setter Property="FontFamily" Value="ThemeResource ContentControlThemeFontFamily" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background" Value="ThemeResource SystemControlBackgroundChromeMediumLowBrush" />
    <Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
    <Setter Property="BorderBrush" Value="ThemeResource SystemControlForegroundTransparentBrush" />
    <Setter Property="BorderThickness" Value="ThemeResource DateTimeFlyoutBorderThickness" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TimePickerFlyoutPresenter">
                <Border x:Name="Background"
                        Background="TemplateBinding Background"
                        BorderBrush="TemplateBinding BorderBrush"
                        BorderThickness="TemplateBinding BorderThickness"
                        MaxHeight="396">
                    <Grid x:Name="ContentPanel">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="44" />
                        </Grid.RowDefinitions>

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" x:Name="FirstPickerHostColumn" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" x:Name="SecondPickerHostColumn" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" x:Name="ThirdPickerHostColumn" />
                            </Grid.ColumnDefinitions>

                            <Rectangle x:Name="HighlightRect" Fill="ThemeResource SystemControlHighlightListAccentLowBrush" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="44" />

                            <Border x:Name="FirstPickerHost" Grid.Column="0" />
                            <Rectangle x:Name="FirstPickerSpacing" Fill="ThemeResource SystemControlForegroundBaseLowBrush" HorizontalAlignment="Center" Width="2" Grid.Column="1" />
                            <Border x:Name="SecondPickerHost" Grid.Column="2" />
                            <Rectangle x:Name="SecondPickerSpacing" Fill="ThemeResource SystemControlForegroundBaseLowBrush" HorizontalAlignment="Center" Width="2" Grid.Column="3" />
                            <Border x:Name="ThirdPickerHost" Grid.Column="4" />
                        </Grid>

                        <Grid Grid.Row="1" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Height="2" VerticalAlignment="Top" Fill="ThemeResource SystemControlForegroundBaseLowBrush" Grid.ColumnSpan="2" />

                            <Button x:Name="AcceptButton" Grid.Column="0" Content="&#xE8FB;" FontFamily="ThemeResource SymbolThemeFontFamily" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="StaticResource DateTimePickerFlyoutButtonStyle" Margin="0,2,0,0" />
                            <Button x:Name="DismissButton" Grid.Column="1" Content="&#xE711;" FontFamily="ThemeResource SymbolThemeFontFamily" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="StaticResource DateTimePickerFlyoutButtonStyle" Margin="0,2,0,0" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>