คุณเปลี่ยนพื้นหลังสำหรับ MouseOver ปุ่มใน WPF ได้อย่างไร

Question 1

ฉันมีปุ่มบนหน้าของฉันด้วย 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>

แต่เมื่อฉันวางเมาส์เหนือปุ่มพื้นหลังของปุ่มจะเปลี่ยนเป็นพื้นหลังสีเทาของหน้าต่างเริ่มต้น
มีปัญหาอะไร?

นี่คือภาพปุ่มก่อนและหลังการวางเมาส์:
ก่อน:

หลัง:
หลังจาก

Question 2

ในการลบ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>

แก้ไข: ไม่กี่ปีที่ผ่านมา แต่คุณสามารถตั้งค่าแปรงขอบด้านในของเส้นขอบที่อยู่ในนั้นได้ Idk ถ้าถูกชี้ให้เห็น แต่ดูเหมือนว่ามันจะไม่เป็น ...

Question 3

คำตอบทั้งหมดจนถึงตอนนี้เกี่ยวข้องกับการแทนที่ลักษณะการทำงานของปุ่มเริ่มต้นด้วยอย่างอื่นทั้งหมด อย่างไรก็ตาม IMHO มีประโยชน์และสำคัญที่จะต้องเข้าใจว่าเป็นไปได้ที่จะเปลี่ยนเฉพาะส่วนที่คุณสนใจโดยแก้ไขเทมเพลตเริ่มต้นที่มีอยู่สำหรับองค์ประกอบ XAML

ในกรณีของการจัดการกับเอฟเฟกต์โฮเวอร์บนปุ่ม WPF การเปลี่ยนแปลงลักษณะที่ปรากฏในButtonองค์ประกอบWPF เกิดจากTriggerรูปแบบเริ่มต้นสำหรับButtonซึ่งขึ้นอยู่กับIsMouseOverคุณสมบัติและตั้งค่าBackgroundและBorderBrushคุณสมบัติของBorderองค์ประกอบระดับบนสุดในเทมเพลตการควบคุม Buttonพื้นหลังขององค์ประกอบคือใต้Borderพื้นหลังขององค์ประกอบดังนั้นการเปลี่ยนแปลงButton.Backgroundสถานที่ให้บริการไม่ได้ป้องกันผลกระทบที่เลื่อนมาจากการมองเห็น

ด้วยความพยายามบางอย่างคุณสามารถลบล้างพฤติกรรมนี้ได้ด้วยตัวตั้งค่าของคุณเอง แต่เนื่องจากองค์ประกอบที่คุณต้องส่งผลกระทบอยู่ในเทมเพลตและไม่สามารถเข้าถึงได้โดยตรงใน XAML ของคุณเองวิธีการดังกล่าวจึงเป็นเรื่องยากและ IMHO ซับซ้อนเกินไป

อีกตัวเลือกหนึ่งที่จะทำให้การใช้งานกราฟิกเป็นContentสำหรับมากกว่าButton Backgroundหากคุณต้องการเนื้อหาเพิ่มเติมบนกราฟิกคุณสามารถรวมเข้ากับGridออบเจ็กต์ระดับบนสุดในเนื้อหาได้

อย่างไรก็ตามหากคุณต้องการปิดใช้งานเอฟเฟกต์โฮเวอร์อย่างแท้จริง (แทนที่จะซ่อนไว้เฉยๆ) คุณสามารถใช้ Visual Studio XAML Designer:

ขณะแก้ไข XAML ของคุณให้เลือกแท็บ"ออกแบบ"
ในแท็บ"การออกแบบ"ค้นหาปุ่มที่คุณต้องการปิดใช้งานเอฟเฟกต์
คลิกขวาที่ปุ่มและเลือก"แก้ไขแม่แบบ / แก้ไขสำเนา ..." เลือกในพรอมต์ที่คุณจะได้รับในตำแหน่งที่คุณต้องการวางทรัพยากรเทมเพลตใหม่ ดูเหมือนว่าจะไม่ทำอะไรเลย แต่อันที่จริงแล้ว Designer จะเพิ่มทรัพยากรใหม่ตามที่คุณบอกและเปลี่ยนองค์ประกอบปุ่มของคุณเพื่ออ้างอิงสไตล์ที่ใช้ทรัพยากรเหล่านั้นเป็นเทมเพลตปุ่ม
ตอนนี้คุณสามารถแก้ไขรูปแบบนั้นได้ สิ่งที่ง่ายที่สุดคือการลบหรือแสดงความคิดเห็น (เช่นCtrl+ E, C) <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 ในโค้ดจริงได้ ... ฉันระบุไว้ที่นี่เท่านั้นเนื่องจากตัวจัดรูปแบบโค้ด Stack Overflow XML สับสนกับ<Style/>องค์ประกอบที่ไม่มีชื่อที่มีคุณสมบัติครบถ้วนกับเนมสเปซ XML)

หากคุณต้องการใช้ลักษณะเดียวกันกับปุ่มอื่น ๆ คุณสามารถคลิกขวาที่ปุ่มเหล่านั้นแล้วเลือก"แก้ไขเทมเพลต / ใช้ทรัพยากร"และเลือกสไตล์ที่คุณเพิ่งเพิ่มสำหรับปุ่มแรก คุณยังสามารถกำหนดให้สไตล์นั้นเป็นสไตล์เริ่มต้นสำหรับปุ่มทั้งหมดโดยใช้เทคนิคปกติในการใช้สไตล์เริ่มต้นกับองค์ประกอบใน XAML

Question 4

นี้ทำงานได้ดีสำหรับฉัน.

รูปแบบปุ่ม

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

หมายเหตุ

ปุ่มนี้จะแสดงกากบาทสีน้ำเงินเล็กน้อยเหมือนกับปุ่มที่ใช้ปิดหน้าต่าง
ด้วยการตั้งค่าพื้นหลังของเส้นตารางเป็น "โปร่งใส" จะเป็นการเพิ่มเสียงที่ดังที่สุดซึ่งหมายความว่าหากเมาส์อยู่ที่ใดก็ตามเหนือปุ่มก็จะทำงานได้ ละเว้นแท็กนี้และปุ่มจะสว่างขึ้นก็ต่อเมื่อเมาส์อยู่เหนือเส้นเวกเตอร์เส้นใดเส้นหนึ่งในไอคอน (ไม่สามารถใช้งานได้มากนัก)

Question 5

แค่ต้องการแชร์รูปแบบปุ่มของฉันจาก ResourceDictionary ที่ฉันใช้อยู่ คุณสามารถเปลี่ยนพื้นหลัง onHover ได้อย่างอิสระที่ทริกเกอร์สไตล์ " ColorAnimation To = * BG ที่คุณต้องการ (เช่น # FFCEF7A0)" นอกจากนี้ปุ่ม BG จะเปลี่ยนกลับเป็น BG เดิมโดยอัตโนมัติหลังจากสถานะ mouseOver คุณยังสามารถตั้งค่าความเร็วในการเปลี่ยนได้

พจนานุกรมทรัพยากร

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

Question 6

คำตอบที่ยากขึ้นเล็กน้อยซึ่งใช้ ControlTemplate และมีเอฟเฟกต์ภาพเคลื่อนไหว (ดัดแปลงจากhttps://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing- ควบคุม )

ในพจนานุกรมทรัพยากรของคุณกำหนดเทมเพลตการควบคุมสำหรับปุ่มของคุณดังนี้:

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

หวังว่าจะช่วยได้

Question 7

สำหรับปุ่มเปลี่ยนรูปแบบ

ขั้นที่ 1: กำหนดรูปแบบทรัพยากร

<Window.Resources>

    <Style x:Key="OvergroundIn" TargetType="Button">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="#FF16832F">
                        <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#FF06731F">
                                <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Trigger>
        </Style.Triggers>

    </Style>

    <Style x:Key="OvergroundOut" TargetType="Button">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="#FFF35E5E">
                        <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="#FFE34E4E">
                                <ContentPresenter TextBlock.Foreground="White" TextBlock.TextAlignment="Center" Margin="0,8,0,0" ></ContentPresenter>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Trigger>
        </Style.Triggers>

    </Style>


</Window.Resources>

รหัสปุ่มที่ 2 กำหนด

                           <Border Grid.Column="2" BorderBrush="LightGray" BorderThickness="2" CornerRadius="3" Margin="2,2,2,2"  >
                                <Button Name="btnFichar" BorderThickness="0" Click="BtnFichar_Click">
                                    <Button.Content>
                                        <Grid>
                                            <TextBlock Margin="0,7,0,7" TextAlignment="Center">Fichar</TextBlock> 
                                        </Grid>
                                    </Button.Content>
                                </Button>
                            </Border>

รหัสที่ 3 ด้านหลัง

    public void ShowStatus()
    {
        switch (((MainDto)this.DataContext).State)
        {
            case State.IN:
                this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(243, 94, 94));
                this.btnFichar.Style = Resources["OvergroundIn"] as Style;
                this.btnFichar.Content = "Fichar Salida";
                break;

            case State.OUT:
                this.btnFichar.BorderBrush = new SolidColorBrush(Color.FromRgb(76, 106, 83));
                this.btnFichar.Style = Resources["OvergroundOut"] as Style;
                this.btnFichar.Content = "Fichar Entrada";
                break;

        }
    }