Как изменить фон для кнопки мыши в WPF?

У меня есть кнопка на моей странице с этим XAML:



<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" 

    Width="50" Height="50" HorizontalContentAlignment="Left" 

    BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">

    <Button.Style>

        <Style TargetType="Button">

            <Setter Property="Background" Value="Green"/>

            <Style.Triggers>

                <Trigger Property="IsMouseOver" Value="True">

                    <Setter Property="Background" Value="Red"/>

                </Trigger>

            </Style.Triggers>

        </Style>

    </Button.Style>

</Button>


но когда я наведу курсор мыши на мою кнопку, фон кнопки изменится на серый фон windows по умолчанию.
В чем проблема?



Это изображение кнопки до и после наведения курсора мыши:

Раньше:
Before

После:
After

1110   5  

5 ответов:

удалить значение по умолчанию MouseOver поведение Button вам нужно изменить ControlTemplate. Изменение вашего Style определение к следующему должно сделать трюк:

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

EDIT: это на несколько лет позже, но вы на самом деле можете установить границу кисти внутри границы, которая находится там. Idk, если это было указано, но это не похоже на то, что это было...

124  
2016-04-22 14:09:13

это хорошо работало для меня.

Стиль Кнопки

<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="DarkGoldenrod"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Grid Background="Transparent">
                        <ContentPresenter></ContentPresenter>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Button Style="{StaticResource TransparentStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25"
        Command="{Binding CloseWindow}">
    <Button.Content >
        <Grid Margin="0 0 0 0">
            <Path Data="M0,7 L10,17 M0,17 L10,7" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Center" Stretch="None" />
        </Grid>
    </Button.Content>
</Button>

Примечания

  • на кнопке отображается маленький синий крестик, очень похожий на тот, который используется для закрытия окна.
  • установив фон сетки на "прозрачный", он добавляет hittest, что означает, что если мышь находится в любом месте над кнопкой, то она будет работать. Опустите этот тег, и кнопка загорится только в том случае, если мышь находится над одним из векторные линии в значке (это не очень удобно).
7  
2016-03-24 09:53:39

просто хочу поделиться своим стилем кнопки из моего ResourceDictionary, который я использую. Вы можете свободно изменить фон onHover в триггерах стиля. "ColorAnimation To = *ваш желаемый BG (т. е. #FFCEF7A0)". Кнопка BG также автоматически вернется к исходному состоянию BG после наведения курсора мыши.Вы даже можете установить, как быстро происходит переход.

Словарь Ресурсов

<Style x:Key="Flat_Button" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="50"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="FontFamily" Value="Arial Narrow"/>
    <Setter Property="FontSize" Value="12px"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground">
        <Setter.Value>
            <SolidColorBrush Opacity="1" Color="White"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" >
        <Setter.Value>
            <SolidColorBrush Opacity="1" Color="#28C2FF" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Border x:Name="border"
                         SnapsToDevicePixels="True"
                         BorderThickness="1"
                         Padding="4,2"
                         BorderBrush="Gray"
                         CornerRadius="3"
                         Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter 
                        Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True" />

                    </Grid>
                </Border>

            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#D2F898"
                                        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                        FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                                            Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" 
                                            FillBehavior="HoldEnd" Duration="0:0:0.25" AutoReverse="False" RepeatBehavior="1x"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>

        </Trigger>


    </Style.Triggers>
</Style>

все, что вам нужно сделать, это позвонить стиль.

Пример Реализации

<Button Style="{StaticResource Flat_Button}" Height="Auto"Width="Auto">  
     <StackPanel>
     <TextBlock Text="SAVE" FontFamily="Arial" FontSize="10.667"/>
     </StackPanel>
</Button>
3  
2016-08-11 20:39:49

немного более сложный ответ, который использует ControlTemplate и имеет анимационный эффект (адаптировано из https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-control)

в словаре ресурсов определите шаблон элемента управления для вашей кнопки следующим образом:

<ControlTemplate TargetType="Button" x:Key="testButtonTemplate2">
    <Border Name="RootElement">
        <Border.Background>
            <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
        </Border.Background>

        <Grid Margin="4" >
            <Grid.Background>
                <SolidColorBrush x:Name="ButtonBackground" Color="Aquamarine"/>
            </Grid.Background>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="Red"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</ControlTemplate>

в вашем XAML вы можете использовать шаблон выше для вашей кнопки, как показано ниже:

определить кнопка

<Button Template="{StaticResource testButtonTemplate2}" 
HorizontalAlignment="Center" VerticalAlignment="Center" 
Foreground="White">My button</Button>

надеюсь, что это помогает

2  
2017-07-28 15:16:19

все ответы до сих пор включают в себя полную замену поведения кнопки по умолчанию с чем-то другим. Тем не менее, ИМХО полезно и важно понимать, что можно изменить только часть, о которой вы заботитесь, путем редактирования существующего шаблона по умолчанию для элемента XAML.

в случае работы с эффектом наведения на кнопку WPF, изменение внешнего вида в WPF Button элемент вызван a Trigger в стиле по умолчанию Button, который на основании IsMouseOver свойство и устанавливает Background и BorderBrush свойства верхнего уровня Border элемент в шаблоне элемента управления. Элемент Button фон элемента находится под Border фон элемента, так что изменение Button.Background свойство не предотвращает эффект наведения от просмотра.

С некоторым усилием вы можете переопределить это поведение с помощью своего собственного сеттера, но поскольку элемент, на который вам нужно повлиять, находится в шаблоне, а не напрямую доступный в вашем собственном XAML, этот подход будет сложным и IMHO слишком сложным.

другой вариант - использовать графику в качестве Content на Button, а не Background. Если вам нужен дополнительный контент поверх графики, вы можете объединить их с Grid как объект верхнего уровня в содержании.

однако, если вы буквально просто хотите полностью отключить эффект наведения (а не просто скрыть его), вы можете использовать Visual Studio XAML Дизайнер:

  1. при редактировании XAML выберите "дизайн" tab.
  2. на "дизайн" tab, найдите кнопку, для которой вы хотите отключить эффект.
  3. щелкните правой кнопкой мыши на эту кнопку и выберите "редактировать шаблон/редактировать копию...". Выберите в приглашении, где вы хотите разместить новый ресурс шаблона. Это, похоже, ничего не сделает, но на самом деле дизайнер добавит новые ресурсы где вы это сказали, и изменили свой элемент button, чтобы ссылаться на стиль, который использует эти ресурсы в качестве шаблона кнопки.
  4. теперь, вы можете пойти изменить этот стиль. Проще всего удалить или закомментировать (например,Ctrl+E,C) the <Trigger Property="IsMouseOver" Value="true">...</Trigger> элемент. Конечно, вы можете внести любые изменения в шаблон, который вы хотите в этот момент.

когда вы закончите, стиль кнопки будет выглядеть это:

<p:Style x:Key="FocusVisual">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
  <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Padding" Value="1"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
          <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
          </Trigger>
          <!--<Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
          </Trigger>-->
          <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</p:Style>

(Примечание: Вы можете не указывать p: квалификации пространства имен XML в фактическом коде...я предоставляю их здесь только потому, что форматер XML-кода переполнения стека запутывается <Style/> элементы, которые не имеют полного имени с пространством имен XML.)

если вы хотите применить тот же стиль для другой кнопки, вы можете просто щелкните правой кнопкой мыши и выберите "Редактировать Шаблон / Применить Ресурс" и выберите стиль, который вы только что добавили в первый кнопка. Вы даже можете сделать этот стиль стилем по умолчанию для всех кнопок, используя обычные методы для применения стиля по умолчанию к элементам в XAML.

0  
2017-09-06 00:30:39

Comments

    Ничего не найдено.
Click here to cancel reply.