Question

我们想要设置一个wpf按钮的样式，以便按钮中设置的内容显示两次。这样做的原因是我们想要实现按钮内容的阴影效果。想到的是按钮样式中有两个ContentControl，如下所示：

<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" />

因此，一个ContentControl用于显示真实内容，一个ContentControl用于显示具有少量边距的相同内容，以便它具有作为投影的效果。问题是它不会在两个内容控件中显示内容。其中只有一个显示内容。如何在两个内容控件中成功显示内容？

此外，由于按钮的内容变得模糊，因此不能选择阴影效果。

感谢您的帮助！

Answer 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 / ContentPresenter而只是将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>

Answer 2

我在一个小的虚拟应用程序中试过这个，它运行得很好。看看这是不是你想要的。

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

在WPF按钮中两次显示相同的内容

2 个答案: