डब्ल्यूपीएफ बटन माउसओवर छवि

Question

मैं विंडोज अनुप्रयोगों के निर्माण के लिए सी # और एक्सएएमएल सीख रहा हूं। मैं एक बटन बनाना चाहता था जिसमें इसकी पृष्ठभूमि के रूप में एक छवि हो। लेकिन जब बटन पर होवर किया जाता है, तो बटन की पृष्ठभूमि को दूसरी "हाइलाइट" छवि में बदलना चाहिए। मैंने पृष्ठभूमि छवियों को resource.resx में जोड़ने का प्रयास किया। मुझे wpf बटन के डिफ़ॉल्ट हाइलाइट प्रभाव से छुटकारा पाने के लिए xaml शैलियों का उपयोग करके एक कस्टम बटन बनाना था।

मैंने SO पर मिले कुछ कोड से एक कस्टम बटन बनाया। कोड (एक नया संसाधन शब्दकोश में) है:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect --> 
    <Style x:Key="StartMenuButtons" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Margin" Value="5"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
         BorderThickness="0" 
         Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 


         <!-- UPDATE THE BUTTON BACKGROUND --> 
         <Setter Property="Background" Value="WHAT GOES HERE" TargetName="border"/> 


        </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

क्या मैं इतना एक और छवि के लिए रखा है पृष्ठभूमि परिवर्तन है कि, चाहे वह मेरी resources.resx या किसी अन्य स्थान में है? (यह सुनिश्चित नहीं है कि छवि को एक्सेस करने के लिए कहां रखा जाए)। मैंने एसओ की खोज की लेकिन मुझे मिले समाधान ठीक से नहीं थे जो मैं कर रहा हूं। यदि यह एक डुप्लिकेट प्रश्न है, तो मैं क्षमा चाहता हूं।

सारांश:

मैं कैसे एक बटन के पृष्ठभूमि छवि एक माउस पर ट्रिगर के ऊपर XAML में बदल सकता हूँ? मैं छवि कहां रखूं ताकि इसे ट्रिगर कोड में एक्सेस किया जा सके?

अद्यतन यह मैंने ट्रिगर कार्रवाई के रूप में रखा है, लेकिन छवि अद्यतन नहीं होती है। मैंने संसाधन निर्माण के लिए छवि निर्माण क्रिया सेट करना सुनिश्चित किया है और इसे संसाधन नामक फ़ोल्डर में रखा है।

कोड है:

<ControlTemplate.Triggers> 
    <Trigger Property="IsMouseOver" Value="True"> 
     <Setter Property="Background"> 
      <Setter.Value> 
      <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" /> 
      </Setter.Value> 
     </Setter> 
    </Trigger> 

फ़ाइल संरचना है

Simon 
    Simon 
     Resources 
      all the images 
     Fonts 
     bin 
     obj 
     Properties 

समाधान

निम्नांकित बटन पर माउसओवर छवि को बदलने के लिए अनुमति देने के लिए पूरा कोड है:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect --> 
    <Style x:Key="StartMenuButtons" TargetType="Button"> 
     <Setter Property="OverridesDefaultStyle" Value="True"/> 
     <Setter Property="Margin" Value="5"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border Name="border" 
         BorderThickness="0" 
         Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" TargetName="border"> 
          <Setter.Value> 
           <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" /> 
          </Setter.Value> 
         </Setter> 

        </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

वास्तविक छवि के लिए, मैंने इसे रूट निर्देशिका में संसाधन फ़ोल्डर में रखा है। दृश्य स्टूडियो में संसाधन उपकरण का उपयोग करके वहां छवियों को आयात करने के बाद, मैंने प्रॉपर्टी फलक में बिल्ड सेटिंग्ससंसाधन को अपडेट किया।

समाधान dbaseman

Answer 1

के लिए धन्यवाद मुझे लगता है कि यह आसान है बस परियोजना में एक /Images फ़ोल्डर में चित्र जोड़ने के लिए।

<ControlTemplate TargetType="Button"> 
    <Border Name="border" BorderThickness="0" 
       Background="Transparent"> 
      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" /> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

(। अपनी छवि MyImage.jpg मान लिया जाये कि अपनी परियोजना के रूट में Images फ़ोल्डर में है)

बस सुनिश्चित करें कि MyImage.jpg है कि अपनी "एक्शन बनाएँ" करने के लिए सेट कर: तब यह वाक्य रचना आप का उपयोग है "संसाधन"।

Answer 2

यह करने का एक और तरीका है।

आप छविइंटर और माउसलेव की छवि की दो घटनाओं का उपयोग कर सकते हैं। अब आपके कोड में ऐसा करें।

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" /> 

सी #

private void image1_MouseEnter(object sender, MouseEventArgs e) 
{ 
    string packUri = @"pack://application:,,,/Resources/Polaroid.png"; 
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource; 
} 

private void image1_MouseLeave(object sender, MouseEventArgs e) 
{ 
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png"; 
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource; 
}