किसी छवि के साथ wpf बटन बनाएं और एक टेक्स्ट

Question

मैं छवि में एक बटन और बटन प्रदर्शित करने के लिए एक बटन टेम्पलेट बनाना चाहता हूं। मैं बटन पर एक क्षैतिज stackpanel का उपयोग करने के बारे में thiking।

मैं लेबल प्रदर्शित करने में सफल नहीं हूं।

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte"> 
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" > 
    <Button.Content> 
     <StackPanel Orientation="Horizontal"> 
      <Border CornerRadius="3"> 
       <ContentPresenter/> 
       <Border.Style> 
        <Style TargetType="{x:Type Border}"> 
         <Setter Property="Background" Value="#58585a" /> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" /> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Border.Style> 
      </Border> 
      <Label> 
       <Label.Content>Fichiers joints</Label.Content> 
       <Label.Foreground>white</Label.Foreground> 
       <Label.VerticalAlignment>center</Label.VerticalAlignment> 
       <Label.HorizontalAlignment>center</Label.HorizontalAlignment> 
      </Label> 
     </StackPanel> 
    </Button.Content> 
    <Button.Style> 
     <Style TargetType="{x:Type Button}" > 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}" > 
         <ContentPresenter /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Button.Style> 
</Button> 

यहाँ इस टेम्पलेट के अपने कॉल है:

यहाँ मेरी टेम्पलेट है

<Grid Margin ="10,180,10,14"> 
      <Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0"> 
       <Image Source="ToolBar_FicJoints.png" /> 
      </Button> 
     </Grid> 

यहाँ एक पाठ बॉक्स के बजाय एक लेबल के साथ एक और तरीका है

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte"> 
    <Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" > 
     <Button.Content> 
      <StackPanel Orientation="Horizontal"> 
       <Border CornerRadius="3"> 
        <ContentPresenter/> 
        <Border.Style> 
         <Style TargetType="{x:Type Border}"> 
          <Setter Property="Background" Value="#58585a" /> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" /> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Border.Style> 
       </Border> 
        <TextBlock Text="LabelText" /> 
       </StackPanel> 
     </Button.Content> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}" > 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type Button}" > 
          <ContentPresenter /> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </Button.Style> 
    </Button> 
</ControlTemplate> 

मेरी समस्या यह है कि मैं अपनी छवि को ऑनल करता हूं, और मेरा लेबल टेम्पलेट में निर्दिष्ट नहीं है। कोई भी मेरी मदद कर सकता है?

धन्यवाद एक बहुत :)

Answer 1

एक TextBlock अपनी आवश्यकताओं एक लेबल की तुलना में बेहतर फिट बैठता है। यदि आप अतिरिक्त लेबल कार्यक्षमता (जैसे लक्ष्य, ऑब्जेक्ट सामग्री) का उपयोग नहीं करते हैं, तो एक अच्छा 'ओले टेक्स्टब्लॉक' के साथ चिपके रहें।

आप सभी बटन स्टाइल निष्क्रिय करने के लिए और केवल एक छवि और बटन में लेबल चाहते हैं (ध्यान दें, इस माउसओवर/mousedown प्रभाव nullifies, लेकिन आप ट्रिगर में तर्क प्रदान कर सकते हैं):

<ControlTemplate TargetType="{x:Type Button}" x:Key="SimpleButton"> 
    <ContentPresenter/> 
</ControlTemplate> 

प्रयोग :

<Button Template="{StaticResource SimpleButton}"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="ToolBar_FicJoints.png" /> 
     <TextBlock Text="LabelText" /> 
    </StackPanel> 
</Button> 

आप सिर्फ एक सामान्य स्टाइल बटन में छवि/TextBlock चाहते हैं, यह और भी आसान है:

<Button> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="ToolBar_FicJoints.png" /> 
     <TextBlock Text="Fichiers joints" /> 
    </StackPanel> 
</Button> 

Answer 2

निम्नानुसार कैनवास का उपयोग करें।

<Button Height="50" Width="150" > 
         <Button.Template> 
          <ControlTemplate> 
           <Canvas> 
            <Image Source="./Images/Cancel.png"/> 
            <TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/> 
           </Canvas> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 

आप Canvas.Left और Canvas.Top अपने आवश्यकताओं के अनुसार समायोजित कर सकते हैं। मुझे उम्मीद है कि यह आपकी मदद करेगा क्योंकि यह छवि के शीर्ष पर टेक्स्टब्लॉक प्रदर्शित करेगा।