Изменить BorderBru sh, когда кнопка IsPressed

Question

Я создаю приложение WPF для сенсорного экрана. На экране должна быть кнопка со значком (изображением). Приведенный ниже код показывает, как должна выглядеть кнопка.

Пока все хорошо ..

Чего я хотел бы добиться, так это того, чтобы при нажатии кнопки первый цвет BorderBru sh должен измениться с «# 0070b8» на «# 00395c», а второй цвет BorderBru sh должен измениться с «# 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

Вы всегда можете установить цвет bru sh в вашем событии клика:

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

Answer 2

Нашли решение!

Если присвоить границам имя, а затем они будут доступны в свойстве триггера

<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>

Answer 3

Это было бы одно решение. Обратите внимание, что мы назначили наши кисти отдельным ресурсам, чтобы у нас не было магических чисел c в нашем стиле. Это идеально для случаев, когда вам нужно использовать одну и ту же цветовую схему для нескольких элементов управления, и экономит много времени, когда вы хотите изменить указанную цветовую схему.

    <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 цвет, то лучше всего иметь команду на виртуальной машине с привязкой к данным, и команда изменяет свойство цвета, к которому также привязывается кнопка. В качестве альтернативы, если предполагается, что он отражает 3 состояния, лучше использовать ставку с переключателем с параметром «три состояния», так как тогда вы можете установить триггеры для свойства IsChecked кнопки.