WPF बटन पर डिफ़ॉल्ट माउस-ओवर प्रभाव कैसे निकालें?

Question

मेरी समस्या यह है कि WPF में, जब भी मैं ट्रिगर्स या एनिमेशन का उपयोग करके बटन की पृष्ठभूमि का रंग बदलता हूं, तो डिफ़ॉल्ट माउसओवर प्रभाव (उस नारंगी चमक के साथ ग्रे होने का) प्राथमिकता लेने लगता है।

व्यापक खोजों के बाद मैं इस प्रभाव को दूर करने के तरीके के बारे में स्पष्ट हूँ।

Answer 1

आपको सभी राज्यों में उपस्थिति पर पूर्ण नियंत्रण रखने के लिए अपना स्वयं का कस्टम बटन टेम्पलेट बनाने की आवश्यकता है। यहाँ एक ट्यूटोरियल है ।

Comments

धन्यवाद, यह एकदम सही था। यह करने के लिए जितना मैंने सोचा था कि यह अधिक जटिल था, लेकिन यह सब अब अच्छी तरह से काम करता है।

— नेलियस

किसी कारण से WPF नियंत्रण के लिए कस्टम टेम्पलेट बनाने के बारे में 100 उत्तर हैं, और वे सभी अनावश्यक रूप से गलत हैं। 1 चीज़ को बदलने के लिए एक बटन के लिए टेम्पलेट कोड की 50 लाइनों को लिखने के लिए संघर्ष करने का कोई कारण नहीं है। आपको बस इतना करना है कि xaml डिजाइनर राइट कंट्रोल पर क्लिक करें और टेम्पलेट कोड की एक कॉपी बनाएं। वीएस उस सटीक बटन से एक शैली बनाएगा और आप इसे वहां से भेज सकते हैं। सचमुच 2 सेकंड लगते हैं।

— मफिन मैन

@ TheMuffinMan शानदार है, लेकिन क्या आपको यह थोड़ा अजीब लगता है कि माउस होवर पर बैकग्राउंड का रंग बदलने से एक बटन को रोकने के लिए टेम्पलेट कोड की 50 लाइनें लगती हैं? एक जटिल जटिल WPF पर क्या बेवकूफी है।

— ऐश

@ एश या कोई यह तर्क दे सकता है कि उपयोगकर्ता को उस दिशा में मार्गदर्शन करना चाहिए जो वे जा रहे हैं। यदि आपके पास एक बटन है जिसके लिए एक नया होवर स्टेट की आवश्यकता होती है, तो संभवतः बटन का एक नया प्रकार; शायद एक नेविगेशन बटन, एक ट्रे बटन, आदि। यदि हां, तो आपको इसके लिए एक-गुण को संशोधित नहीं करना चाहिए, इसका अपना नियंत्रण या शैली समूह होना चाहिए। और इस तरह से यह आपको बनाता है।

— मैट किंफिक

Answer 2

यह मार्क हीथ द्वारा संदर्भित समाधान के समान है, लेकिन एनीमेशन प्रभाव के बिना बिल्ट-इन माउस के बिना बहुत ही मूल बटन बनाने के लिए अधिक कोड के साथ नहीं। यह काले रंग में बटन सीमा दिखाने के प्रभाव पर एक साधारण माउस को संरक्षित करता है।

शैली को विंडो में डाला जा सकता है। उदाहरण के लिए WindowResources या 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>

Comments

मुझे वह समाधान बहुत पसंद है। हालाँकि, ट्रिगर पर माउस केवल तभी सक्रिय होता है जब माउस बटन पर पाठ के ऊपर होता है। मैंने उस समस्या को ठीक करने के लिए बटन के अंदर एक निर्दिष्ट चौड़ाई के साथ एक टेक्स्टब्लॉक जोड़ा।

— दवे

आप साहब संत हैं।

— krobelusmeetsyndra

Answer 3

बस एक बहुत ही सरल समाधान जोड़ने के लिए, यह मेरे लिए काफी अच्छा था, और मुझे लगता है कि ओपी के मुद्दे को संबोधित करता है। मैंने एक छवि के बजाय एक नियमित मूल्य को छोड़कर इस उत्तर में समाधान का उपयोग किया 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से किसी भी पसंदीदा मूल्य के साथ बदलें ।

Answer 4

मफिन मैन का बहुत ही सरल जवाब था जो मेरे लिए काम करता था।

थोड़ा और विशिष्ट दिशा जोड़ने के लिए, कम से कम वीएस 2013 के लिए:

• नियंत्रण को राइट-क्लिक करें
• संपादित करें खाका => एक प्रति संपादित करें ...
• मैंने शैली को बचाने के लिए 'एप्लिकेशन' का चयन किया
  • यहां से आप सीधे App.xaml को संपादित कर सकते हैं और सहज ज्ञान युक्त नामित गुण देख सकते हैं। अपने उद्देश्यों के लिए, मैंने अभी RenderMouseOver = "गलत" सेट किया
• फिर, MainWindow.xaml में या जहाँ भी आपका GUI है, आप बटन के अंत में नई शैली पेस्ट कर सकते हैं, जैसे। ... Style="{DynamicResource MouseOverNonDefault}"/>

Comments

मफिन मैन कौन है?

— डब्ल्यू पर माइक डब्ल्यू

जबरदस्त हंसी। उन्होंने प्रश्न-स्वामी-स्वीकृत उत्तर का दूसरा उत्तर दिया। अगर आप गंभीरता से पूछ रहे थे या मजाक कर रहे थे तो यकीन नहीं था। मफिन मैन जैसे नाम के साथ बताना मुश्किल है।

— बेंजी-मैन

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

फिर शैली को अपने बटन में इस तरह से जोड़ें शैली = "{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>

Answer 6

यदि कोई डिफ़ॉल्ट नियंत्रण टेम्प्लेट को ओवरराइड नहीं करना चाहता है तो यहां समाधान है।

आप बटन के लिए DataTemplate बना सकते हैं जिसमें TextBlock हो सकता है और फिर आप प्रभाव से अधिक माउस को निष्क्रिय करने के लिए IsMouseOver संपत्ति पर संपत्ति ट्रिगर लिख सकते हैं। टेक्स्टब्लॉक और बटन की ऊंचाई समान होनी चाहिए।

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

Answer 7

Dodgy_coder के उत्तर पर एक एक्सटेंशन जो समर्थन जोड़ता है ..

• WPF बटन शैली बनाए रखना

• इस्लेक्टेड और होवर के लिए समर्थन जोड़ता है, यानी टॉगल बटन

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

Answer 8

टेम्पलेट ट्रिगर का उपयोग करना:

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