设计介于两者之间的内容的UserControl样式

本文关键字:UserControl 样式 两者之间 | 更新日期: 2023-09-27 18:25:57

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

设计介于两者之间的内容的UserControl样式

您可以使用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>

编辑:

如果要将星形调整到其可用空间,请使用"拉伸=填充",而不是使用和高度绑定(已在上面更改)。