1

我们想要为 wpf 按钮设置样式，以便按钮中设置的内容显示两次。这样做的原因是我们要实现按钮内容的投影效果。最终的想法是在 Button 样式中有两个 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 用于显示相同的内容，并留有一点边距，这样它就可以产生阴影效果。问题是它没有在两个内容控件中显示内容。其中只有一个显示内容。如何在两个内容控件中成功显示内容？

此外，阴影效果不是一个选项，因为按钮的内容变得模糊。

感谢帮助！

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/ContentPresenter并且只是将一个渲染为 aBrush以填充一个矩形并获得您的效果。

使用模板复制可视化树

尝试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 回答