在 WPF 中为带有图像按钮的按钮设置样式

Question

我需要通过以下方式在 WPF 中设置按钮样式

文本区域（客户登录）和图标区域（正好是整个灰色区域）应该作为一个按钮使用
目前，我正在使用两个按钮，一个用于文本部分，另一个用于图标部分，并将它们与相同的单击事件绑定，但我没有得到想要的结果
Form.xaml

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button Tag="ByCard" x:Name="btn_CustomerLoginIcon" Grid.Column="0" Style="{StaticResource style_Button_GreyDefault}" MinHeight="90" Width="80" Margin="0,20" FontSize="35" Click="btn_CustomerLogin_Click">
                <StackPanel>
                    <TextBlock>My text here</TextBlock>
                    <Image Source="/Resources/img_businessman.png" Stretch="None" />
                </StackPanel>
            </Button>
            <Button Tag="ByCard" x:Name="btn_CustomerLogin" Grid.Column="0" Style="{StaticResource style_Button_GreyDefault}" MinHeight="90" MinWidth="400" Margin="20" FontSize="35" Content="Customer Login" Click="btn_CustomerLogin_Click" />
            <Button Tag="Manual" x:Name="btn_ConsultantLogin" Grid.Column="1" Style="{StaticResource style_Button_GreyDefault}" MinHeight="90" MinWidth="400" Margin="20" FontSize="35" Content="Consultant Login" Click="btn_ConsultantLogin_Click" />
            <Button Tag="Manual" x:Name="btn_NewUser" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource style_Button_RedDefault}" MinHeight="90" MinWidth="400" Margin="20" FontSize="35" Content="New User" Width="80" Click="btn_NewUser_Click" />
        </Grid>
    </StackPanel>

Resource.xaml

<Style x:Key="style_Button_GreyDefault" TargetType="{x:Type Button}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Background" Value="{StaticResource color_Greyish}"/>
        <Setter Property="BorderBrush" Value="{StaticResource color_White}"/>
        <Setter Property="BorderThickness" Value="5"/>
        <Setter Property="Foreground" Value="{StaticResource color_BlueDefault}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="16,3,16,3"/>
        <!--<Setter Property="FontFamily" Value="Avenir-Medium"/>-->
        <Setter Property="FontFamily" Value="Arial Bold"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="Chrome"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="10"
                                SnapsToDevicePixels="true">
                        <ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    RecognizesAccessKey="True"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource color_Gray}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource color_BlueDefault}" />
                            <Setter Property="BorderBrush" Value="{StaticResource color_BlueDefault}" />
                            <Setter Property="Foreground" Value="{StaticResource color_White}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{StaticResource color_BlueDefault}" />
                            <Setter Property="BorderBrush" Value="{StaticResource color_White}"/>
                            <Setter Property="Foreground" Value="{StaticResource color_White}"/>
                            <Setter Property="Button.Effect">
                                <Setter.Value>
                                    <DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <!--<Trigger Property="IsFocused" Value="true">
                            <Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource color_White}" />
                        </Trigger>-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="style_Button_GreyIcon" TargetType="{x:Type Button}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Background" Value="{StaticResource color_Greyish}"/>
        <Setter Property="BorderBrush" Value="{StaticResource color_White}"/>
        <Setter Property="BorderThickness" Value="5"/>
        <Setter Property="Foreground" Value="{StaticResource color_BlueDefault}"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="16,3,16,3"/>
        <!--<Setter Property="FontFamily" Value="Avenir-Medium"/>-->
        <Setter Property="FontFamily" Value="Arial Bold"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="Chrome"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="50"
                                SnapsToDevicePixels="true">
                        <ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    RecognizesAccessKey="True"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource color_Gray}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource color_BlueDefault}" />
                            <Setter Property="BorderBrush" Value="{StaticResource color_BlueDefault}" />
                            <Setter Property="Foreground" Value="{StaticResource color_White}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{StaticResource color_BlueDefault}" />
                            <Setter Property="BorderBrush" Value="{StaticResource color_White}"/>
                            <Setter Property="Foreground" Value="{StaticResource color_White}"/>
                            <Setter Property="Button.Effect">
                                <Setter.Value>
                                    <DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <!--<Trigger Property="IsFocused" Value="true">
                            <Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource color_White}" />
                        </Trigger>-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这就是我现在得到的

我的方法正确吗？还是有更好的方法来实现这一目标？我假设我需要执行以下操作

• 我需要增加图像按钮的高度，这样它 不会影响文本按钮的高度
  
• 我需要在两个按钮之间应用适当的填充

Answer 1

这是aling的一些粗略草图，看看这是否可以让你走上正轨。 该代码产生了这个：

我没有费心让它看起来像你的，只是按照你的要求做了。

 <ControlTemplate x:Key="ButtonControlTemplate1"
                         TargetType="{x:Type Button}">
            <Grid Width="180">
                <Grid.RowDefinitions>
                    <RowDefinition Height="10" />
                    <RowDefinition Height="40" />
                    <RowDefinition Height="10" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border x:Name="LabelSection"
                        Grid.Column="1"
                        Grid.Row="1"
                        Margin="-20 0 0 0"
                        Background="#FFD4D4D4"
                        BorderThickness="2"
                        BorderBrush="White"
                        CornerRadius="5">
                    <Label Content="{Binding Content,RelativeSource={RelativeSource AncestorType=Button}}"
                           Foreground="Blue"
                           Margin="20 0 0 0" 
                           VerticalAlignment="Center"/>
                </Border>
                <Border x:Name="ImageSection"
                        Grid.Row="0"
                        Grid.RowSpan="3"
                        Background="#FFD4D4D4"
                        BorderThickness="2"
                        BorderBrush="White"
                        CornerRadius="25"
                        Width="50"
                        Height="50">
                    <Image Source="man15.png"
                           Height="35" />
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="true">
                    <Setter TargetName="ImageSection"
                            Property="Background"
                            Value="lightGreen" />
                    <Setter TargetName="LabelSection"
                            Property="Background"
                            Value="lightGreen" />
                </Trigger>
                <Trigger Property="IsPressed"
                         Value="true">
                    <Setter TargetName="ImageSection"
                            Property="Background"
                            Value="Yellow" />
                    <Setter TargetName="LabelSection"
                            Property="Background"
                            Value="Yellow" />
                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>

我在模板中更新了标签绑定

 <Label Content="{Binding Content,RelativeSource={RelativeSource AncestorType=Button}}"

这样，使用此模板的按钮负责标签内容，并将其绑定到该按钮内容。例如，您可以在按钮 Content="ok" 中编写输出将是正常的，或者像数字 2 按钮那样动态地编写。

<Button Content="Button1"
        Template="{StaticResource ButtonControlTemplate1}"/>

<Button Content="{Binding SomePropertyForContent}"
            Template="{StaticResource ButtonControlTemplate1}"/>