1

ボタンに設定されたコンテンツが 2 回表示されるように、wpf ボタンのスタイルを設定します。これは、ボタンのコンテンツのドロップ シャドウ効果を実現したいためです。以下のように、Button スタイルに 2 つの ContentControls を用意することを考えました。

<ContentControl x:Name="ContentControl" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="White" Margin="0,1,0,0" />

したがって、1 つの ContentControl は実際のコンテンツを表示するためのもので、もう 1 つの ContentControl は同じコンテンツを少し余白を付けて表示するためのもので、ドロップ シャドウの効果が得られます。問題は、両方のコンテンツ コントロールにコンテンツが表示されないことです。そのうちの 1 つだけがコンテンツを表示します。両方のコンテンツ コントロールにコンテンツを正常に表示するにはどうすればよいですか?

また、ボタンのコンテンツがぼやけてしまうため、ドロップシャドウ効果はオプションではありません。

手伝ってくれてありがとう！

4

2 に答える 2

1

ネストされたコンテンツを持つボタン:

<Style x:Key="ShadowButton"
        TargetType="{x:Type Button}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <Rectangle Width="{Binding ActualWidth,
                                      ElementName=presenter}"
                      Height="{Binding ActualHeight,
                                      ElementName=presenter}">
            <Rectangle.Fill>
              <VisualBrush AlignmentX="Left"
                            Stretch="None"
                            Visual="{Binding ElementName=presenter}" />
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
              <TranslateTransform X="3"
                                  Y="3" />
            </Rectangle.RenderTransform>
          </Rectangle>
          <!-- You can replace the following line to a ContentControl if you absolutely have to -->
          <ContentPresenter x:Name="presenter"
                            ContentSource="Content" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

使用法は、次のように動的にすることができます。

<Button HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="36"
        Style="{StaticResource ShadowButton}">
  <StackPanel>
    <Button Margin="2"
            Content="A" />
    <Button Margin="2"
            Content="B" />
    <TextBox Margin="2"
             Text="Blah" />
  </StackPanel>
</Button>

VisualBrushスタイルに2 ContentControl/を持たないa を使用し、ContentPresenter1 つを a にレンダリングしBrushて長方形を塗りつぶし、効果を得ます。

テンプレートを使用してビジュアル ツリーを複製する

そもそもUserControlこれをするようにしてください。Buttonスタイルでビジュアル ツリーを複製する場合は、テンプレートを使用する必要があります。

<Style x:Key="ShadowButton"
        TargetType="{x:Type Button}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <ContentControl x:Name="shadow"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Foreground="SpringGreen">
            <ContentControl.RenderTransform>
              <TranslateTransform X="50"
                                  Y="50" />
            </ContentControl.RenderTransform>
          </ContentControl>
          <ContentControl x:Name="presenter"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Foreground="SlateBlue" />
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger SourceName="presenter"
                    Property="IsMouseOver"
                    Value="True">
            <Setter TargetName="shadow"
                    Property="Foreground"
                    Value="Teal" />
            <Setter TargetName="presenter"
                    Property="Foreground"
                    Value="Red" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

と使用法:

<Button HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Style="{StaticResource ShadowButton}">
  <Button.ContentTemplate>
    <DataTemplate>
      <StackPanel>
        <Button Margin="2"
                Content="A"
                Foreground="{Binding RelativeSource={RelativeSource FindAncestor,
                                                                    AncestorType={x:Type ContentControl}},
                                      Path=Foreground}" />
        <TextBox Margin="2"
                  Foreground="{Binding RelativeSource={RelativeSource FindAncestor,
                                                                      AncestorType={x:Type ContentControl}},
                                      Path=Foreground}"
                  Text="Blah" />
      </StackPanel>
    </DataTemplate>
  </Button.ContentTemplate>
</Button>
于 2013-03-26T11:34:42.610 に答える
0

これを小さなダミーアプリケーションで試してみたところ、問題なく動作しました。これがあなたが望むものかどうかを確認してください。

     <Window.Resources>
        <Style x:Key="test" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <ContentControl Content="{TemplateBinding Content}" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
                            <ContentControl Foreground="DarkGray" 
                                            Content="{TemplateBinding Content}" 
                                            ContentTemplate="{TemplateBinding ContentTemplate}" 
                                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}">
                                <ContentControl.RenderTransform>
                                    <TranslateTransform Y="2" X="2"/>
                                </ContentControl.RenderTransform>
                            </ContentControl>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource test}">
            Test
        </Button>
    </Grid>
于 2013-03-26T14:24:27.733 に答える