设计带有中间内容的 UserControl 样式答案

【问题标题】：Design UserControl Style with content in-between设计带有中间内容的 UserControl 样式
【发布时间】：2012-02-28 08:27:42
【问题描述】：

我为 UserControl 设计了各种形状的样式，例如星形、球形、天空等。所有这些形状都是使用路径设计的。我需要使用样式读取用户控件的内容并调整宽度和高度并显示内容。

<Style TargetType="{x:Type UserControl}">
    <Setter Property="Background" Value="#CCC4C4" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type UserControl}">
              <Path
           Data="F1M37.3,41.5L24.0,34.8 10.7,41.4 13.2,27.3 2.5,17.3 17.4,15.3 24.0,2.5 30.6,15.3 45.5,17.4 34.7,27.3 37.3,41.5z"
           Fill="White"
            Height="{TemplateBinding Height}"
            Width="{TemplateBinding Width}"
           Stroke="#FFC4A000"
           StrokeMiterLimit="4"
           StrokeThickness="1">

      </Path>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

标签： c# wpf xaml user-controls wpf-controls

【解决方案1】：

您可以使用ContentControl，它是可以填充单个内容的Container。

这是一个例子：

  <Grid>
    <Grid.Resources>
      <Style TargetType="{x:Type ContentControl}">
        <Setter Property="Background" Value="#CCC4C4" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContentControl}">
              <Path
           Data="F1M37.3,41.5L24.0,34.8 10.7,41.4 13.2,27.3 2.5,17.3 17.4,15.3 24.0,2.5 30.6,15.3 45.5,17.4 34.7,27.3 37.3,41.5z"
           Fill="White"
           Stretch="Fill"
           Stroke="#FFC4A000"
           StrokeMiterLimit="4"
           StrokeThickness="1">

              </Path>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Grid.Resources>

    <StackPanel>
      <!-- the below ones become stars -->
      <ContentControl></ContentControl>
      <ContentControl></ContentControl>
      <ContentControl></ContentControl>
    </StackPanel>

  </Grid>

编辑：

如果您希望星星调整到其可用空间，请使用 Stretch = Fill，而不是 with 和 height 绑定（在上面进行了更改）。

【讨论】：