छवि के साथ WPF बटन

Question

मैं WPF में एक बटन पर एक छवि संलग्न करने की कोशिश कर रहा हूं, हालांकि यह कोड विफल रहता है। समान कोड के बाद अजीब लगता है कि मोज़िला XUL में पूरी तरह से काम करेगा।

<Button Height="49.086" Margin="3.636,12,231.795,0" Name="button2" 
        VerticalAlignment="Top" Grid.Column="1" Click="button2_Click" 
        Source="Pictures/apple.jpg">Disconnect from Server</Button>

Answer 1

आप इसके बजाय ऐसा कुछ करना चाहते हैं:

<Button>
    <StackPanel>
        <Image Source="Pictures/apple.jpg" />
        <TextBlock>Disconnect from Server</TextBlock>
    </StackPanel>
</Button>

Comments

परियोजना के लिए Apple.jpg जोड़ने के लिए मत भूलना। (बिल्ड एक्शन: संसाधन)

— वाटबाइबरीफ

जब आप बटन को अक्षम करते हैं तो यह एक बहुत ही बुरा समाधान होता है क्योंकि टेक्स्ट और इमेज को ग्रे नहीं किया जाएगा ।

— अंक लॉक

@NumLock आपका समाधान कहाँ है?

— मीतिटस

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

— ओनसुकुमारु

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

— पॉल मैकार्थी

Answer 2

स्ट्रेच छवि को पूर्ण बटन के लिए एक और तरीका। नीचे दिए गए कोड की कोशिश कर सकते हैं।

<Grid.Resources>
  <ImageBrush x:Key="AddButtonImageBrush" ImageSource="/Demoapp;component/Resources/AddButton.png" Stretch="UniformToFill"/>
</Grid.Resources>

<Button Content="Load Inventory 1" Background="{StaticResource AddButtonImageBrush}"/> 

यहां से रेफर किया गया

इसके अलावा यह अन्य मदद कर सकता है। मैंने यहां MouseOver ऑप्शन के साथ ही पोस्ट किया ।

Answer 3

<Button x:Name="myBtn_DetailsTab_Save" FlowDirection="LeftToRight"  HorizontalAlignment="Left" Margin="835,544,0,0" VerticalAlignment="Top"  Width="143" Height="53" BorderBrush="#FF0F6287" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="B Titr" FontSize="15" FontWeight="Bold" BorderThickness="2" Click="myBtn_DetailsTab_Save_Click">
    <StackPanel HorizontalAlignment="Stretch" Background="#FF1FB3F5" Cursor="Hand" >
        <Image HorizontalAlignment="Left"  Source="image/bg/Save.png" Height="36" Width="124" />
        <TextBlock HorizontalAlignment="Center" Width="84" Height="22" VerticalAlignment="Top" Margin="0,-31,-58,0" Text="ثبت مشتری" />
    </StackPanel>
</Button>

Comments

आपको अपना उत्तर स्पष्ट करना चाहिए, कभी-कभी केवल सामग्री को समझने के लिए केवल कोड पर्याप्त नहीं है

— अक्षय पालीवाल

यदि आप इस बटन का उपयोग करते हैं, तो आपके पास यह त्रुटि है कि "प्रकार का मान 'datagridtextcolumn' को किसी संग्रह या शब्दकोश के प्रकार में नहीं जोड़ा जा सकता है" observablecollection "या इसी तरह की त्रुटि से आप शैली जोड़ते हैं ...> <DataGrid.Resources: <Style x: Key = शीर्ष लेख "टारगेट टाइप =" DataGridColumnHeader "> <सेटर प्रॉपर्टी =" हॉरिज़ॉन्टल कॉन्टेंटलीमेंट "मान =" केंद्र "/> </ स्टाइल> </DataGrid.Resources

— ehsan A

यह उपयोगी था और मेरी समस्या को हल किया, धन्यवाद। और फारसी लोगों के अलावा अन्य लोगों के लिए 'सबमिट' को बदलना न भूलें! : डी

— स्टूडियोएक्स '

Answer 4

यह काम करना चाहिए, नहीं?

<Button Content="Test">
    <Button.Background>
        <ImageBrush ImageSource="folder/file.PNG"/>
    </Button.Background>
</Button>

Answer 5

आप एक कस्टम नियंत्रण बना सकते हैं जो बटन वर्ग से विरासत में मिला है। यह कोड अधिक पुन: उपयोग करने योग्य होगा, कृपया अधिक जानकारी के लिए निम्नलिखित ब्लॉग पोस्ट देखें: WPF - छवि के साथ कस्टम बटन बनाएं (इमेजबटन)

इस नियंत्रण का उपयोग करना:

<local:ImageButton Width="200" Height="50" Content="Click Me!"
    ImageSource="ok.png" ImageLocation="Left" ImageWidth="20" ImageHeight="25" />

ImageButton.cs फ़ाइल:

public class ImageButton : Button
{
   static ImageButton()
   {
       DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
   }

   public ImageButton()
   {
       this.SetCurrentValue(ImageButton.ImageLocationProperty, WpfImageButton.ImageLocation.Left);
   }

   public int ImageWidth
   {
       get { return (int)GetValue(ImageWidthProperty); }
       set { SetValue(ImageWidthProperty, value); }
   }

   public static readonly DependencyProperty ImageWidthProperty =
       DependencyProperty.Register("ImageWidth", typeof(int), typeof(ImageButton), new PropertyMetadata(30));

   public int ImageHeight
   {
       get { return (int)GetValue(ImageHeightProperty); }
       set { SetValue(ImageHeightProperty, value); }
   }

   public static readonly DependencyProperty ImageHeightProperty =
       DependencyProperty.Register("ImageHeight", typeof(int), typeof(ImageButton), new PropertyMetadata(30));

   public ImageLocation? ImageLocation
   {
       get { return (ImageLocation)GetValue(ImageLocationProperty); }
       set { SetValue(ImageLocationProperty, value); }
   }

   public static readonly DependencyProperty ImageLocationProperty =
       DependencyProperty.Register("ImageLocation", typeof(ImageLocation?), typeof(ImageButton), new PropertyMetadata(null, PropertyChangedCallback));

   private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
   {
       var imageButton = (ImageButton)d;
       var newLocation = (ImageLocation?) e.NewValue ?? WpfImageButton.ImageLocation.Left;

       switch (newLocation)
       {
           case WpfImageButton.ImageLocation.Left:
               imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
               imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 0);
               break;
           case WpfImageButton.ImageLocation.Top:
               imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 0);
               imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
               break;
           case WpfImageButton.ImageLocation.Right:
               imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
               imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 2);
               break;
           case WpfImageButton.ImageLocation.Bottom:
               imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 2);
               imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
               break;
           case WpfImageButton.ImageLocation.Center:
               imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
               imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
               break;
           default:
               throw new ArgumentOutOfRangeException();
       }
   }

   public ImageSource ImageSource
   {
       get { return (ImageSource)GetValue(ImageSourceProperty); }
       set { SetValue(ImageSourceProperty, value); }
   }

   public static readonly DependencyProperty ImageSourceProperty =
       DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));

   public int RowIndex
   {
       get { return (int)GetValue(RowIndexProperty); }
       set { SetValue(RowIndexProperty, value); }
   }

   public static readonly DependencyProperty RowIndexProperty =
       DependencyProperty.Register("RowIndex", typeof(int), typeof(ImageButton), new PropertyMetadata(0));

   public int ColumnIndex
   {
       get { return (int)GetValue(ColumnIndexProperty); }
       set { SetValue(ColumnIndexProperty, value); }
   }

   public static readonly DependencyProperty ColumnIndexProperty =
       DependencyProperty.Register("ColumnIndex", typeof(int), typeof(ImageButton), new PropertyMetadata(0));
}

public enum ImageLocation
{
   Left,
   Top,
   Right,
   Bottom,
   Center
}

Generic.xaml फ़ाइल:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfImageButton">
    <Style TargetType="{x:Type local:ImageButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding ImageSource, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
                               Width="{Binding ImageWidth, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
                               Height="{Binding ImageHeight, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
                               Grid.Row="{Binding RowIndex, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
                               Grid.Column="{Binding ColumnIndex, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
                               VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                        <ContentPresenter Grid.Row="1" Grid.Column="1" Content="{TemplateBinding Content}"
                                          VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Answer 6

सबसे सरल दृष्टिकोण छवि टैग का उपयोग होगा।

<Button Name="btn" Width="26" Height="26" Click="btnClick"> 
   <Image Source="Resource/btn-icon.png"/>
</Button>

मान लें कि आपकी छवि फ़ाइल संसाधन फ़ोल्डर में जोड़ी गई है