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

84

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

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

wpf  button  mouseover 
— 넬리 우스
소스

답변:

17

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

— 마크 히스
소스
2
감사합니다. 완벽했습니다. 생각했던 것보다 더 복잡했지만 지금은 모두 잘 작동합니다.
— Nellius 2010 년
18
어떤 이유로 WPF 컨트롤에 대한 사용자 지정 템플릿을 만드는 방법에 대한 100 개의 답변이 있으며 모두 불필요하게 잘못되었습니다. 버튼 하나를 변경하기 위해 50 줄의 템플릿 코드를 작성하는 데 어려움을 겪을 이유가 없습니다. xaml 디자이너에서 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 코드의 복사본을 만들기 만하면됩니다. VS는 정확한 버튼으로 스타일을 만들고 거기에서 조정할 수 있습니다. 말 그대로 2 초가 걸립니다.
— The Muffin Man
@TheMuffinMan 환상적이지만, 마우스를 가져갈 때 버튼이 배경색을 변경하는 것을 막기 위해 50 줄의 템플릿 코드가 필요하다는 사실이 조금 이상하다고 생각합니까? 복잡한 프레임 워크 WPF가 어리석은 일입니다.
— Ash
@Ash 또는 사용자가 가야 할 방향으로 사용자를 안내하고 있다고 주장 할 수 있습니다. 새로운 호버 상태가 필요한 버튼이있는 경우 새로운 유형의 버튼 일 수 있습니다. 탐색 버튼, 트레이 버튼 등일 수 있습니다. 그렇다면 일회성 속성을 수정해서는 안되며 자체 컨트롤 또는 스타일 그룹이 있어야합니다. 그리고 이것이 당신이하는 일입니다.
— Matt Kenefick
107

이것은 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>
— dodgy_coder
소스
2
나는 그 솔루션을 많이 좋아합니다. 그러나 마우스 오버 트리거는 마우스가 버튼의 텍스트 위에있을 때만 활성화됩니다. 이 문제를 해결하기 위해 버튼 내부에 지정된 너비의 텍스트 블록을 추가했습니다.
— Dave
당신은 성인입니다.
— krobelusmeetsyndra
25

매우 간단한 솔루션을 추가하기 위해 그것은 나에게 충분 했으며 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선호하는 값으로 대체하십시오 .

— 라이 알
소스
10

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

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

  • 컨트롤을 마우스 오른쪽 버튼으로 클릭
  • 템플릿 편집 => 사본 편집 ...을 선택합니다.
  • 스타일을 저장할 위치로 '응용 프로그램'을 선택했습니다.
    • 여기에서 App.xaml을 직접 편집하고 직관적으로 명명 된 속성을 볼 수 있습니다. 제 목적을 위해 RenderMouseOver = "False"를 설정했습니다.
  • 그런 다음 MainWindow.xaml 또는 GUI가있는 곳에 새 스타일을 Button 태그 끝에 붙여 넣을 수 있습니다. ... Style="{DynamicResource MouseOverNonDefault}"/>
— 벤지 맨
소스
머핀 맨은 누구입니까?
— Mike W
LOL. 그는 질문 소유자가 수락 한 답변에 대해 두 번째 답변을했습니다. 진지하게 물어보고 있는지 농담인지 확실하지 않았습니다. 머핀 맨과 같은 이름으로 말하기는 어렵습니다.
— Benji-Man
5

이 링크는 나를 많이 도왔습니다. http://www.codescratcher.com/wpf/remove-default-mouse-over-effect-on-wpf-buttons/

UserControl.Resources 또는 Window.Resources 에서 스타일 정의

 <Window.Resources>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" Value="0.8" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

그런 다음 Style = "{StaticResource MyButton}" 으로 버튼에 스타일을 추가합니다.

<Button Name="btnSecond" Width="350" Height="120" Margin="15" Style="{StaticResource MyButton}">
    <Button.Background>
        <ImageBrush ImageSource="/Remove_Default_Button_Effect;component/Images/WithStyle.jpg"></ImageBrush>
    </Button.Background>
</Button>
— Arash. Zandi
소스
4

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

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>
— 프라 텍 라이
소스
1

지원을 추가하는 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" />

— stoj
소스
0

템플릿 트리거 사용 :

<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>
— 라 이네 미카엘
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.