的樣式WPF的按鈕與圖片+文字

在我的C＃/ WPF/.NET 4.5應用程序，我有按鈕與我在下面的方式來實現圖片：的樣式WPF的按鈕與圖片+文字

<Button Style="{StaticResource BigButton}"> 
    <StackPanel> 
    <Image Source="Images/Buttons/bt_big_save.png" /> 
    <TextBlock>save</TextBlock> 
    </StackPanel> 
</Button>

我有資源字典UIStyles.xaml中，我聲明如下：

<Style TargetType="Button" x:Key="BigButton"> 
    <Setter Property="Cursor" Value="Hand" /> 
    <Setter Property="Height" Value="80" /> 
    <Setter Property="Width" Value="80" /> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="Button"> 
     <Border x:Name="border" 
      CornerRadius="5" 
      Background="#FF415360"> 
      <ContentPresenter x:Name="ButtonContentPresenter" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Center"> 
      <ContentPresenter.Resources> 
       <Style TargetType="TextBlock"> 
       <Setter Property="TextAlignment" Value="Center" /> 
       </Style> 
       <Style TargetType="Image"> 
       <Setter Property="Width" Value="10" /> 
       <Setter Property="Margin" Value="10" /> 
       </Style> 
      </ContentPresenter.Resources> 
      </ContentPresenter> 
     </Border> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style>

光標，高度，邊框等性能做工精細，但我不能樣式的TextBlock和Image。

具體來說，有什麼需要是這樣的：

correct look

最終看起來像這樣（不考慮色差）：

incorrect look

我見過similar questions問前但解決方案使用了不同的方法（我不想創建自定義的用戶控件，除了這一個之外，我的所有需求都包含在本代碼中並且重寫將是一個滋擾）。我只是需要修復我的Style使得TextBlock居中和Image居中且變得更小。

如何重寫Style來糾正按鈕的外觀？

來源

2013-04-03 mbaytas

你的問題的解決方案可能是你的形象和風格的TextBlock移動到控件模板的資源部分。我不確定爲什麼，但我認爲如果樣式屬於內容展示者資源的一部分，則樣式不在範圍內。

來源

2013-04-03 13:00:49

這是正確的，''中的樣式沒有得到應用。將它們移動到「」使UI看起來像預期的那樣。 – Rachel

使用height屬性固定圖像高度讓說30（取決於您reqirement），並使用HorzontalAllignment到中心進行文本塊它西港島線做工精細

來源

2013-04-03 12:07:43 Betty

不幸的是，事實並非如此。 – mbaytas

嘗試是這樣的：

的Button：

<Button Style="{StaticResource BigButton}" Content="save"> 
    <Button.Tag> 
     <ImageSource>../GreenLamp.png</ImageSource> 
    </Button.Tag> 
</Button>

的Style：

<Style TargetType="Button" x:Key="BigButton"> 
    <Setter Property="Cursor" Value="Hand" /> 
    <Setter Property="Height" Value="80" /> 
    <Setter Property="Width" Value="80" /> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="FontWeight" Value="Bold" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border x:Name="border" 
         CornerRadius="5" 
         Background="#FF415360"> 
        <StackPanel> 
         <Image Source="{TemplateBinding Tag}" 
           VerticalAlignment="Top" 
           HorizontalAlignment="Center" 
           Height="50" 
           Margin="5" /> 
         <ContentPresenter x:Name="ButtonContentPresenter" 
             VerticalAlignment="Center" 
             HorizontalAlignment="Center"> 
        </ContentPresenter> 
        </StackPanel> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

您可能必須更改Height/Margin,Image,Style以符合您的需求。

來源

2013-04-03 13:00:47 Eirik

我想，如果你設定按鈕的替代的ContentTemplate內容，將工作。

<Button Style="{StaticResource BigButton}"> 
    <Button.ContentTemplate> 
     <DataTemplate> 
      <StackPanel> 
      <Image Source="Resources/icon_cancel.png" /> 
      <TextBlock>save</TextBlock> 
      </StackPanel> 
     </DataTemplate> 
    </Button.ContentTemplate> 
</Button>

來源

2013-04-03 14:39:45 sthotakura

的樣式WPF的按鈕與圖片+文字

回答

相關問題