带有图标和文本的按钮的 UWP 自定义样式答案

【问题标题】：UWP Custom Style for Button with Icon and Text带有图标和文本的按钮的 UWP 自定义样式
【发布时间】：2020-05-02 23:00:51
【问题描述】：

我有一个自定义切换按钮，其中包含一个图标和一个文本。最后我想将这种样式用于不同的按钮，每个按钮都有不同的文本和图标

<Style TargetType="ToggleButton" x:Key="CustomButton">
    <Setter Property="Width" Value="180"/>
    <Setter Property="Height" Value="90"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Foreground" Value="Gray"/>
    <Setter Property="Content" Value="hola"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Texto">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkRed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Icono">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="Gray" BorderThickness="{TemplateBinding BorderThickness}" Background="Gray" CornerRadius="15">
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}"  Foreground="LightGray" HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                        <iconPacks:PackIconMaterial Margin="0,0,10,0" x:Name="Icono" Kind="AccountPlus" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#B8B8B8" Width="24" Height="24"/>
                        <TextBlock x:Name="Texto" Margin="0,5,0,0" Text="{TemplateBinding Content}"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

还有这样的xaml

<ToggleButton x:Name="BotonUsuarioNuevo"
              HorizontalAlignment="Center"
              Margin="0,30,0,20"
              Content="New User"
              Style="{StaticResource CustomButton}"/>

问题是我找不到在 xaml 中传递图标“Kind”的方法，因此该样式可以重复使用。

有什么想法吗？？

干杯！！！

【问题讨论】：

标签： xaml uwp togglebutton

【解决方案1】：

ToggleButton 不提供Icon 属性，所以不能直接传递Icon 属性。一种解决方法是您可以改用AppBarToggleButton。

<AppBarToggleButton x:Name="toggleBtn" Icon="UnFavorite" Label="UnFavorite"/>

另一个是你需要编写一个自定义ToggleButton的Content属性。

<ToggleButton>
    <StackPanel>
        <SymbolIcon Symbol="Admin"/>
        <TextBlock Text="Admin"/>
    </StackPanel>
</ToggleButton>

第三种方法是编写自己的用户控件，其中包含一个Icon 控件，或者一个派生自Button 类的类。

【讨论】：