您可以使用圖片中的按鈕製作樣式，文字上方標有顏色的圖片？

我想知道是否有可能在WPF中做一個按鈕樣式，你有一個文字，圖像和圖像上的文字（圖像上）與顏色標記如下圖所示？您可以使用圖片中的按鈕製作樣式，文字上方標有顏色的圖片？

到現在爲止我只喜歡這在您的按鈕代碼得到這個

<Style TargetType="{x:Type Button}" x:Key="CatProBtn"> 
     <Setter Property="Background" Value="#373737" /> 
     <Setter Property="Foreground" Value="White" /> 
     <Setter Property="FontSize" Value="15" /> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Border CornerRadius="4" Background="{TemplateBinding Background}"> 
         <Grid> 
          <!--<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>--> 
          <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" 
               HorizontalAlignment="Right" VerticalAlignment="Center" 
               /> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <EventTrigger RoutedEvent="PreviewMouseDown"> 
          <SoundPlayerAction Source="C:\Users\shaban\Downloads\Cash_register_beep_sound_.wav" /> 
         </EventTrigger> 
         <Trigger Property="Button.IsPressed" Value="True"> 
          <Setter Property="BorderBrush" Value="Transparent" /> 
         </Trigger> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" Value="#E59400" /> 
          <Setter Property="Foreground" Value="White" /> 
          <!--<Setter TargetName="PathIcon" Property="Fill" Value="Black" />--> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="True"> 
          <Setter Property="Background" Value="OrangeRed" /> 
          <Setter Property="Foreground" Value="White"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="False"> 

          <Setter Property="Background" Value="White"/> 
          <Setter Property="BorderBrush" Value="Wheat"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

....

 <Button 
     Style="{StaticResource CatProBtn}" 
     Margin="1,1,0,3" 
      Name="Shaban" 
      Height="Auto" 
      Width="Auto" 
      Grid.Row="1" 
      Grid.Column="1" 
      Click="Button_Click"> 
     <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center"> 
      <TextBlock Text="Ispinde"></TextBlock> 
      <Image Source="C:\Users\shaban\Pictures\Picture5.png" Stretch="Uniform"></Image> 
      <TextBlock Text="Ispinde" HorizontalAlignment="Right"/> 
     </StackPanel> 
    </Button>

來源

2016-03-06 user2439427

激勵和修改的值來實現你想要的結果。

使用網格佈局您的內容。在圖像上疊加價格。

<Button MinHeight="50" HorizontalAlignment="Center"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 
     <TextBlock Grid.Row="0" Text="Title" TextAlignment="Center"/> 
     <!-- This is where your image is in your code --> 
     <TextBlock Grid.Row="1" Text="Your&#x0a;image&#x0a;here..." FontSize="14" Background="Gray" TextAlignment="Center"/> 
     <TextBlock Grid.Row="2" Text="Description Description Description" TextAlignment="Center" TextWrapping="Wrap" FontSize="8" MaxWidth="100"/> 

     <!-- Superimpose price on top of image with some opacity --> 
     <TextBlock Grid.Row="1" Text="20,00 kr." Background="Yellow" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,12" Opacity="0.6" FontSize="8"/> 
    </Grid> 
</Button>

結果

來源

2016-03-06 21:57:23

我需要做它作爲一種風格，因爲我必須做60個按鈕 – user2439427

自然。因此，修改您的樣式和按鈕控件或從按鈕派生的UserControl，以使用我演示的網格/疊加圖案。我只是向您展示瞭如何修改您提供的示例代碼以實現期望的結果。 –

我認爲你的控件將具有標題，圖像，描述，價格等屬性，你將在你的代碼中使用這些屬性，你可以使用綁定等等（不是硬編碼的圖像等），並且你正在展示一個最小的例子尋求複雜佈局的幫助。 –

您可以覆蓋在使用網格的另一個控制的控制。它會是這樣的：

<Button> 
    <Grid> 
     <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center"> 
      <TextBlock Text="Ispinde"/> 
      <Image Source="C:\Users\shaban\Pictures\Picture5.png"" Stretch="Uniform"/> 
     </StackPanel> 
     <Grid Width="100" Height="40" HorizontalAlignment="Right"> 
      <Grid Background="Red" Opacity="0.6"/> 
      <TextBlock Foreground="White" Text="Overlay"/> 
     </Grid> 
    </Grid> 
</Button>

來源

2016-03-06 22:00:21 emoacht

您可以使用圖片中的按鈕製作樣式，文字上方標有顏色的圖片？

回答

相關問題