10

私の C#/WPF/.NET 4.5 アプリケーションには、次の方法で実装した画像付きのボタンがあります。

<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。

具体的には、次のようにする必要があります。

正しい見た目

最終的には次のようになります (色の違いは無視します)。

不適切な外観

以前に同様の質問があったのを見たことがありますが、ソリューションは異なるアプローチを使用していました (カスタム ユーザー コントロールを作成したくありません。これ以外のすべてのニーズは現在のコードでカバーされており、書き直すのは面倒です)。が中央に配置され、が中央に配置されて小さくStyleなるように修正するだけです。TextBlockImage

Styleボタンの外観を修正するために を書き直すにはどうすればよいですか?

4

4 に答える 4

9

次のようなことを試してください：

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を変更する必要がある場合があります。ImageStyle

于 2013-04-03T13:00:47.690 に答える
6

問題の解決策は、Image スタイルと TextBlock スタイルを ControlTemplate の Resource セクションに移動することです。理由はわかりませんが、スタイルがコンテンツ プレゼンターのリソースの一部である場合、スタイルは対象外だと思います。

于 2013-04-03T13:00:49.577 に答える