Program Tip

WPF 버튼에서 기본 마우스 오버 효과를 제거하는 방법은 무엇입니까?

programtip 2020. 10. 16. 07:57
반응형

WPF 버튼에서 기본 마우스 오버 효과를 제거하는 방법은 무엇입니까?


내 문제는 WPF에서 트리거 또는 애니메이션을 사용하여 버튼의 배경색을 변경하려고 할 때마다 기본 마우스 오버 효과 (주황색 빛이 나는 회색)가 우선적으로 보인다는 것입니다.

광범위한 검색 후 나는이 효과를 제거하는 방법에 대해 단서가 없습니다.


모든 상태에서 모양을 완전히 제어하려면 사용자 지정 단추 템플릿을 만들어야합니다. 여기에 튜토리얼이 있습니다.


이것은 Mark Heath가 언급 한 솔루션과 유사하지만 애니메이션 효과 위에 내장 된 마우스없이 매우 기본적인 버튼을 만드는 코드가 많지 않습니다. 버튼 테두리를 검은 색으로 표시하는 효과를 단순 마우스 위에 유지합니다. 예를 들어 (그림과 같이) Window.Resources 또는 UserControl.Resources 섹션에 스타일을 삽입 할 수 있습니다.

    <UserControl.Resources>
        <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
        <Style x:Key="MyButtonStyle" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                            BorderThickness="1"
                            Padding="4,2" 
                            BorderBrush="DarkGray" 
                            CornerRadius="3" 
                            Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

<!-- usage in xaml -->
<Button Style="{StaticResource MyButtonStyle}">Hello!</Button>

아주 간단한 솔루션을 추가하기 위해 나에게 충분 했으며 OP의 문제를 해결 한다고 생각 합니다. 이 답변Background 에서 이미지 대신 일반 값을 제외하고 솔루션 사용했습니다 .

<Style x:Key="SomeButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

템플릿 버튼에서 Background항상 Transparent배경이 되도록 강제하는 것 이상으로 다시 템플릿을 만들 필요가 없습니다.이 작업이 완료되면 마우스 오버가 더 이상 배경에 영향을주지 않습니다. 분명히 Transparent선호하는 값으로 대체하십시오 .


머핀 맨은 나를 위해 일한 매우 간단한 대답을 가지고있었습니다.

좀 더 구체적인 방향을 추가하려면 적어도 VS 2013의 경우 :

  • 컨트롤을 마우스 오른쪽 버튼으로 클릭
  • 템플릿 편집 => 사본 편집 ...을 선택합니다.
  • 스타일을 저장할 위치로 '응용 프로그램'을 선택했습니다.
    • 여기에서 App.xaml을 직접 편집하고 직관적으로 명명 된 속성을 볼 수 있습니다. 내 목적을 위해 RenderMouseOver = "False"를 설정했습니다.
  • 그런 다음 MainWindow.xaml 또는 GUI가있는 곳에 새 스타일을 Button 태그 끝에 붙여 넣을 수 있습니다. ... Style="{DynamicResource MouseOverNonDefault}"/>

누군가가 기본 제어 템플릿을 재정의하고 싶지 않다면 여기에 해결책이 있습니다.

TextBlock을 가질 수있는 버튼에 대한 DataTemplate을 만든 다음 IsMouseOver 속성에 Property 트리거를 작성하여 마우스 오버 효과를 비활성화 할 수 있습니다. TextBlock과 Button의 높이가 같아야합니다.

    <Button Background="Black" Margin="0" Padding="0" BorderThickness="0" Cursor="Hand" Height="20">
                    <Button.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="GO" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextDecorations="Underline" Margin="0" Padding="0" Height="20">
                                <TextBlock.Style>
                                    <Style TargetType="TextBlock">
                                        <Style.Triggers>
                                            <Trigger Property ="IsMouseOver" Value="True">
                                                <Setter Property= "Background" Value="Black"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                        </DataTemplate>
                    </Button.ContentTemplate>
                </Button>

지원을 추가하는 dodgy_coder의 답변에 대한 확장 ..

  • WPF 버튼 스타일 유지
  • IsSelected 및 hover 지원 추가 (예 : 토글 버튼)

        <Style x:Key="Button.Hoverless" TargetType="{x:Type ButtonBase}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border Name="border"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="{TemplateBinding Padding}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="Selector.IsSelected" Value="False" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="#FFBEE6FD" />
                            </MultiTrigger>
    
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="Selector.IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="#BB90EE90" />
                            </MultiTrigger>
    
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="False" />
                                    <Condition Property="Selector.IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="LightGreen" />
                            </MultiTrigger>
    
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="Opacity" Value="0.95" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    

예 ..

<Button Content="Wipe On" Selector.IsSelected="True" /> <Button Content="Wipe Off" Selector.IsSelected="False" />


템플릿 트리거 사용 :

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="White"></Setter>
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="White"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

참고URL : https://stackoverflow.com/questions/3854317/how-to-remove-default-mouse-over-effect-on-wpf-buttons

반응형