WPF

Question

में अनियमित पीएनजी बटन का क्लिक ईवेंट मुझे WPF में अनियमित रूप से आकार का बटन चाहिए। मैं इस तरह से XAML का उपयोग करने में यह कर रहा हूँ:

<Button Name="toggleButton" Click="toggleButton_Click" Canvas.Left="177" Canvas.Top="0"> 
    <Button.Template> 
    <ControlTemplate> 
     <Image Source="ball.png" /> 
    </ControlTemplate> 
    </Button.Template> 
</Button> 

मेरे ball.png छवि उसके चारों ओर पारदर्शी क्षेत्र के साथ एक गेंद के साथ एक PNG छवि है। बटन सही तरीके से प्रदर्शित होता है, लेकिन जब मैं छवि के पारदर्शी भाग पर क्लिक करता हूं तब भी इवेंट हैंडलर को निष्पादित किया जाता है।

क्या पारदर्शी पीएनजी का उपयोग करके अनियमित बटन बनाने का कोई तरीका है?

धन्यवाद, मीकल

Answer 1

आप छवि से विरासत में प्राप्त एक वर्ग बना सकते हैं और HitTestCore ओवरराइड कर सकते हैं ताकि यह किसी छवि के पारदर्शी हिस्सों पर हिट परीक्षण का जवाब न दे, और उसके बाद उस तालिका को सादा छवि के बजाय अपने टेम्पलेट में उपयोग करें।

यहां एक उदाहरण है, हालांकि पारदर्शी पिक्सेल की जांच करने के लिए कोड बहुत मजबूत नहीं है क्योंकि यह छवि स्रोत और पिक्सेल प्रारूप के बारे में कुछ धारणा करता है। यदि आपके पास पहले से पारदर्शी पिक्सेल की जांच करने के लिए कोड है तो आपको इसके बजाय इसे प्लग करना चाहिए।

public class TransparentImage 
    : Image 
{ 
    protected override HitTestResult HitTestCore(
     PointHitTestParameters hitTestParameters) 
    { 
     // Get value of current pixel 
     var source = (BitmapSource)Source; 
     var x = (int)(hitTestParameters.HitPoint.X/
      ActualWidth * source.PixelWidth); 
     var y = (int)(hitTestParameters.HitPoint.Y/
      ActualHeight * source.PixelHeight); 
     var pixels = new byte[4]; 
     source.CopyPixels(new Int32Rect(x, y, 1, 1), pixels, 4, 0); 
     // Check alpha channel 
     if (pixels[3] < 10) 
     { 
      return new PointHitTestResult(this, hitTestParameters.HitPoint); 
     } 
     else 
     { 
      return null; 
     } 
    } 

    protected override GeometryHitTestResult HitTestCore(
     GeometryHitTestParameters hitTestParameters) 
    { 
     // Do something similar here, possibly checking every pixel within 
     // the hitTestParameters.HitGeometry.Bounds rectangle 
     return base.HitTestCore(hitTestParameters); 
    } 
} 

Answer 2

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

<Button Content="This is my crazy button" Style="{DynamicResource CrazyButtonStyle}"/> 

मैं जानता हूँ कि इस बटन के रूप में पारदर्शी PNG का उपयोग नहीं है, लेकिन यह करता है, तो एक बेहतर विकल्प होगा: इस प्रकार

<Window.Resources> 
     <Style x:Key="CrazyButtonStyle" TargetType="{x:Type Button}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Grid> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="path"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FFBEBEBE"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF919191"/> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF782B2B"/> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF1D0C0C"/> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF720505"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="path"> 
               <EasingColorKeyFrame KeyTime="0" Value="#FF6E0000"/> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Path x:Name="path" Data="M95.5,33.499981 C71.500031,31.499967 76.5,68.5 76.5,68.5 L112.5,75.500276 107.5,92.500393 144.5,105.50048 152.5,79.500301 132.5,63.50019 154.5,54.500128 173.5,68.500225 168.5,87.500356 172.5,97.500425 185.5,96.500418 197.12084,75.753906 200.12084,44.753692 176.5,34.49999 143.5,32.499975 142.5,13.499841 130.5,28.499946 137.5,41.500036 135.5,51.500106 117.5,52.500113 99.5,54.500126 116.5,39.500022 z" Stretch="Fill" Stroke="{x:Null}"> 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="Black" Offset="0"/> 
             <GradientStop Color="White" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
          <ContentPresenter HorizontalAlignment="Right" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Top" Margin="0,24.52,18.715,0"/> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsFocused" Value="True"/> 
          <Trigger Property="IsDefaulted" Value="True"/> 
          <Trigger Property="IsMouseOver" Value="True"/> 
          <Trigger Property="IsPressed" Value="True"/> 
          <Trigger Property="IsEnabled" Value="False"/> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Window.Resources> 

अब बटन का उपयोग करें:

यहाँ एक उदाहरण है आपके पास पीएनजी को xaml में बदलने की क्षमता है।