按下按钮时更改 BorderBrush

Question

我正在为触摸屏创建 WPF 应用程序。 屏幕上应该有一个带有图标（图像）的按钮。 下面的代码显示了按钮的外观。

到现在为止还挺好..

我想要实现的是，当您按下按钮时，第一个 BorderBrush 颜色应从“#0070b8”变为“#00395c”，第二个 BorderBrush 颜色应从“#e3e3e3”变为“#727272”。

有人可以帮助我如何实现这一目标吗？

<Button Width="64" Height="64" Grid.Row="1" Margin="1,1" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Image Source="Resources\Home_Icon_2.bmp" Width="54" Height="54"></Image>
        <Button.Style>
            <Style TargetType="{x:Type Button}" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ButtonBase}">
                            <Border CornerRadius="6" Background="{TemplateBinding Background}" Name="button" Width="64">
                                <Grid>
                                    <Border BorderThickness="0,0,2,2" BorderBrush="#0070b8" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
                                        <Border.Effect>
                                            <BlurEffect Radius="1" KernelType="Gaussian"/>
                                        </Border.Effect>
                                    </Border>
                                    <Border BorderThickness="2,2,0,0" BorderBrush="#e3e3e3" Opacity="0.5" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
                                        <Border.Effect>
                                            <BlurEffect Radius="1" KernelType="Gaussian"/>
                                        </Border.Effect>
                                    </Border>
                                    <ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter TargetName="button" Property="Background" Value="#e3e3e3" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background" Value="#c6c3c6" />
            </Style>
        </Button.Style>
    </Button>

Answer 1

这将是一种解决方案。 请注意，我们已将画笔分配给单独的资源，以便我们的样式中没有幻数。 当您需要在多个控件中使用相同的配色方案时，这是理想的选择，并在您想要更改所述配色方案时节省大量时间。

    <Style x:Key="AdtakrButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="ButtonBorder" CornerRadius="5" BorderThickness="{DynamicResource AdtakrButtonBorderThickness}" BorderBrush="{DynamicResource AdtakrBlack}" Background="{DynamicResource AdtakrWhite}" Margin="{DynamicResource ButtonMargin}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,0" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource AdtakrGrey2}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
                            <Setter Property="Background" Value="{DynamicResource AdtakrGrey1}" TargetName="ButtonBorder"/>
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource AdtakrGrey2}" TargetName="ButtonBorder"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{DynamicResource AdtakrLightBlue}" TargetName="ButtonBorder"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource AdtakrLightBlue}" TargetName="ButtonBorder"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="FontSize" Value="{DynamicResource AdtakrDefFontSize}"/>
        <Setter Property="MinWidth" Value="90"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="ToolTipService.ShowOnDisabled" Value="True"/>
    </Style>

如果您需要让它在 1 种以上颜色之间进行更改，那么最好的办法是在数据绑定 VM 上设置一个命令，并且该命令会更改按钮也绑定到的颜色属性。 或者，如果它应该反映 3 个状态，那么使用带有三个状态选项的切换按钮可能是您更好的选择，因为这样您就可以针对按钮的 IsChecked 属性设置触发器。

Answer 2

您始终可以在单击事件中设置画笔颜色：

private void btnYourButton_Click(object sender, RoutedEventArgs e) { btnYourButton.BorderBrush = (Brush)new BrushConverter().ConvertFrom("#00395c"); }

Answer 3

找到了解决办法！

通过为边框命名，然后它们可以在 Trigger 属性中访问

<Button Width="64" Height="64" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Image Source="Images\Home_Icon_2.png" Width="54" Height="54"></Image>
            <Button.Style>
                <Style TargetType="{x:Type Button}" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ButtonBase}">
                                <Border x:Name="button" CornerRadius="6" Background="{TemplateBinding Background}" Width="64">
                                    <Grid>
                                        <Border x:Name="border1" BorderThickness="0,0,2,2" BorderBrush="#0070b8" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
                                            <Border.Effect>
                                                <BlurEffect Radius="1" KernelType="Gaussian"/>
                                            </Border.Effect>
                                        </Border>
                                        <Border x:Name="border2" BorderThickness="2,2,0,0" BorderBrush="#e3e3e3" Opacity="0.5" CornerRadius="{Binding ElementName=button, Path=CornerRadius}">
                                            <Border.Effect>
                                                <BlurEffect Radius="1" KernelType="Gaussian"/>
                                            </Border.Effect>
                                        </Border>
                                        <ContentPresenter TextBlock.FontSize="{TemplateBinding FontSize}" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
                                    </Grid>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsPressed" Value="True">
                                        <Setter TargetName="button" Property="Background" Value="#e3e3e3" />
                                        <Setter TargetName="border1" Property="BorderBrush" Value="#00395c" />
                                        <Setter TargetName="border2" Property="BorderBrush" Value="#727272" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Background" Value="#c6c3c6" />
                </Style>
            </Button.Style>
        </Button>