自定义按钮的UWP风格与图标和文本。

Question

我有一个自定义的ToggleButton，包含一个图标和一个文本。最后，我想把这个样式用在不同的按钮上，每个按钮都有不同的Text和Icon。

<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"，这样样式就可以重复使用。

有什么想法吗？

干杯!!!

Answer 1

ToggleButton 不提供 Icon 属性，所以你不能通过 Icon 属性直接使用。一个变通的方法是你可以使用 AppBarToggleButton 而不是。

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

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

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

第三种方法是编写你自己的用户控件，它包含了一个叫做 Icon 控制，或派生出一个类 Button 类。