如何使样式保持内容属性设置为基于样式？ [英] How to have style keep content property set in basedon style?

问题描述

我正在尝试定义按钮样式的层次结构，我希望能够在派生样式中设置属性值，而不会丢失在父样式中设置的内容值。 />


我尝试了什么：



这是简化的根风格：

 <  样式    x：键  =  CircleButtonStyle  
                 TargetType   =  {x：Type Button}  >  
 <   Setter    属性  = 模板 >  
 <   Setter.Value  >  
 < ;   ControlTemplate     TargetType  < span class =code-keyword> =  {x：Type Button} >  
 <  网格 >  
 <   Ellipse     x：名称  =  圈  
                                < span class =code-attribute>         StrokeThickness   =   0  
                                < span class =code-attribute>        拉伸  = 统一  
                                        < span class =code-attribute>填充  =  {StaticResource myCustomBrush} < span class =code-attribute>   /  >  
 <  内容演示者    Horizo​​ntalAlignment   = 拉伸  
                                                           VerticalAlignment   = 拉伸    /  >  
 <   / Grid  >  
 <   / ControlTemplate  >  
 <   / Setter.Value  >  
 <   / Setter  >  
 <   / Style  >  
 

这是简化的第一个派生样式：

 <  样式    x：键  =  CircleCrossStyle  
                 TargetType   =  {x：类型按钮}  
                 BasedOn   =  {StaticResource CircleButtonStyle} >  
 <   Setter    属性  = < span class =code-keyword>内容 >  
 <   Setter.Value  >  
 <  网格 >  
 <  路径   笔划  = 白色  
                    < span class =code-attribute>              拉伸  =  Uniform  
                                  保证金  =  0.5  
                                  数据  =  M 1 1 H 0 M 1 1 H 2 M 1 1 V 0 M 1 1 V 2  
                                   VerticalAlignment   =  拉伸  
                                   Horizo​​ntalAlign   = 拉伸    /  >  
 <   / Grid  >  
 <   / Setter.Value  >  
 <   / Setter  >  
 <   / Style  >  
 

以上工作。现在我希望有一个相同的Style，除了将整个东西旋转45°。我试过了：

 <  风格    x：Key   =  CircleXStyle  
                 TargetType   =  {x：类型按钮}  
  < span class =code-attribute>               BasedOn   =  {StaticResource CircleCrossStyle} >  
 <   Setter    属性  =  RenderTransformOrigin  
                  < span class =code-attribute>    值  =  0.5,0.5    /  >  
 <   Setter    属性  =  RenderTransform > ;  
 <   Setter.Value  >  
 <   RotateTransform    角度  =  45     /  >  
 <   / Setter.Value  >  
 <   / setter  >  
 <   /样式 >  
 

我不知道为什么会这样没有工作，但它根本没有显示路径。

我删除了Setters并使用此Style仍未显示路径。



如何保存/传播CircleCrossStyle中的内容集，以便我可以在CircleXStyle中添加旋转效果？ （或者仅仅使用样式是不可能的吗？）



更多探索：

我正在使用它DataGridTemplateColumn.CellTemplate中的按钮。我尝试引用CircleCrossStyle。此样式也用于DataGrid下面的按钮。当我这样做时，CircleCrossStyle在网格的最后一行正确使用 ！ 和使用该样式的另一个按钮现在显示缺少路径，就像DataGrid的所有其他行一样！

我改变了返回CircleXStyle没有Setter，它的表现完全一样。只有最后一行有CircleCrossStyle而另一个按钮只有圆圈。 （显然我之前没有注意到这一点。）

我尝试将相同的Content Setter从CircleCrossStyle复制到CircleXStyle并将其更改为从CircleButtonStyle派生。 （因此除了名称之外，它与CircleCrossStyle相同。）同样，只有网格的最后一行是正确的。



有什么想法吗？

解决方案

如评论中所述，我怀疑添加到内容的控件只能在一个地方使用。



解决方法是使用 ContentTemplate ，这会在每次使用时创建一个新的子控件实例。 />

 <   Setter    属性  =  ContentTemplate >  
 <   Setter.Value  >  
 <   DataTemplate  >  
 <  网格 >  
 <  路径    
   
                                          笔划  = < span class =code-keyword>白色  
   
                < span class =code-attribute>                          拉伸  = 统一  
   
                                          保证金  =  0.5  
   
                      < span class =code-attribute>                    数据  =  M 1 1 H 0 M 1 1 H 2 M 1 1 V 0 M 1 1 V 2  
   
                                           VerticalAlignment   = 拉伸  
   
                                           Horizo​​ntalAlignment   = 拉伸    
   
            < span class =code-attribute>                       /  >  
 <   / Grid  >  
 <   / DataTemplate  >  
 <   / Setter.Value  >  
 <   / Setter  >  

I'm trying to define a hierarchy of button styles and I'd like to be able to set property values in the derived style without losing the Content value set in a parent Style.

What I have tried:

Here's the simplified "root" Style:

<Style x:Key="CircleButtonStyle"
       TargetType="{x:Type Button}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid>
          <Ellipse x:Name="Circle"
                   StrokeThickness="0"
                   Stretch="Uniform"
                   Fill="{StaticResource myCustomBrush}" />
          <ContentPresenter HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Here's the simplified first derived style:

<Style x:Key="CircleCrossStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource CircleButtonStyle}">
  <Setter Property="Content">
    <Setter.Value>
        <Grid>
          <Path Stroke="White"
                Stretch="Uniform"
                Margin="0.5"
                Data="M 1 1 H 0 M 1 1 H 2 M 1 1 V 0 M 1 1 V 2"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch" />
        </Grid>
    </Setter.Value>
  </Setter>
</Style>

The above worked. Now I want to have a Style that is the same except for rotating the whole thing 45°. I tried:

<Style x:Key="CircleXStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource CircleCrossStyle}">
  <Setter Property="RenderTransformOrigin"
          Value="0.5,0.5" />
  <Setter Property="RenderTransform">
    <Setter.Value>
      <RotateTransform Angle="45" />
    </Setter.Value>
  </Setter>
</Style>

I'm not sure why this didn't work, but it didn't show the Path at all.
I removed the Setters and using this Style still didn't show the Path.

How do I preserve/propagate the Content set in the CircleCrossStyle so I can add the rotation effect in the CircleXStyle? (Or is it impossible using only Styles?)

More exploring:
I was using this on a button in a DataGridTemplateColumn.CellTemplate. I tried referencing the CircleCrossStyle instead. This Style is also used on a button below the DataGrid. When I did this, the CircleCrossStyle was correctly used only on the last row of the grid! And the other button that used the style now showed with the path missing, like all of the other rows of the DataGrid!
I changed the style back to CircleXStyle with no Setters and it behaved exactly the same. Only the last row had the CircleCrossStyle and the other button had only the circle. (I hadn't noticed this before, apparently.)
I tried copying the same Content Setter from CircleCrossStyle to CircleXStyle and changed it to derive from CircleButtonStyle. (So it is identical to CircleCrossStyle except for the name.) Again, only the last row of the Grid is correct.

Any thoughts?

解决方案

As mentioned in the comments, I suspect the controls added to the Content can only be used in one place.

The solution is to use the ContentTemplate instead, which creates a new instance of the child controls each time it's used.

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <Grid>
                <Path 

                    Stroke="White"

                    Stretch="Uniform"

                    Margin="0.5"

                    Data="M 1 1 H 0 M 1 1 H 2 M 1 1 V 0 M 1 1 V 2"

                    VerticalAlignment="Stretch"

                    HorizontalAlignment="Stretch" 

                />
            </Grid>
        </DataTemplate>
    </Setter.Value>
</Setter>

这篇关于如何使样式保持内容属性设置为基于样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！