WinUI 3.将Button的部分内容设置为xaml样式

xqnpmsa8  于 2023-06-19  发布在  其他
关注(0)|答案(1)|浏览(156)

我目前正试图实现我的用户体验设计师的愿望,设计一个按钮。

目标是更改按钮的样式,使其始终在右侧包含固定的图形,并在设置按钮内容时修改左侧的剩余空间。理想情况下,该图形还需要在按下时稍微改变其背景颜色。
目前我正在尝试通过修改默认按钮样式的副本来实现这一点。

<Style x:Key="PopUpButton" TargetType="Button">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <!-- Other setters needed for the Button -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver" />

                            <VisualState x:Name="Pressed">

                                <Storyboard>
                                    <!-- Animation Targeting background of static graphic -->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="#D5DEEB}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    -->
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter x:Name="ContentPresenter" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{StaticResource AppBarEllipsisButtonInnerBorderMargin}" Padding="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" Control.IsTemplateFocusTarget="True" />

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!-- Where i want content to appear --> 
                    <Grid Grid.Column="0" Content = "{TemplateBinding Content}"/>

                    <!-- Where i want the static content located -->
                    <Border Grid.Column="1" Background="#F2F5FA">
                        <TextBlock Text = ">"/>
                    </Border>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我知道以下原因导致此解决方案不起作用:

  • 无法将属性元素添加到ControlTemplates的网格的内容中
  • 即使有可能,内容也不是网格中的可绑定属性。
  • 图像将是理想的使用,而不是边框/文本块组合。但是我相信它不支持在样式中添加图像。

我还考虑了以下几点:

<Setter Property="Content">
    <Setter.Value>
        <Grid>
            <!-- Static content here -->
        </Grid>
    </Setter.Value>
</Setter>

然而,每当我试图向按钮添加文本时,它就会被替换,因为我会否决这个setter。
我很想,如果爱任何帮助我的问题,我做relize,我想要的可能是不可能的,我需要使用自定义控制或用户控制,这确实感觉有点像重新发明轮子tho。

bvjveswy

bvjveswy1#

按钮的Content必须使用ContentPresenter(已经在ControlTemplate中)显示,而不是新的Grid
请确保对ContentContentTemplate属性都使用TemplateBinding

(...)
</VisualStateManager.VisualStateGroups>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

<!-- Where i want content to appear --> 
<ContentPresenter x:Name="ContentPresenter"
                  Grid.Column="0"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  (...)
                  />

<!-- Where i want the static content located -->
<Border Grid.Column="1" Background="#F2F5FA">
    <TextBlock Text = ">"/>
</Border>
(...)

如果你想要一个更完整(但也更复杂)的例子,你可以在这里找到一个类似的Button样式,它也显示了图标旁边的按钮内容。

相关问题