Content of a Button Style appears only in one Button instance

问题

I have a Viewbox:

<Viewbox x:Key="SampleViewbox" >
  <Grid>
    <Ellipse Stroke="#e2e2e0" StrokeThickness="6" Fill="#d5273e" Width="128" Height="128"/>
  </Grid>
</Viewbox>

I then include this in a Style like:

<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="Transparent" >
                    <ContentPresenter Content="{StaticResource SampleViewbox}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now I created many buttons with SampleStyle

<Grid>   
    <StackPanel>
       <Button Style="{StaticResource SampleStyle}" Height="50" Width="50"></Button>
       <Button Style="{StaticResource SampleStyle}" Height="80" Width="80"></Button>
       <Button Style="{StaticResource SampleStyle}" Height="20" Width="20"></Button>  
    </StackPanel>
</Grid>

However, Only one button has the Ellipse (viewbox)

How can I make all the buttons have/show the ellipse??

回答1:

Viewbox is FrameworkElement which cannot belong to multiple parents. Every time buttons request a resource {StaticResource SampleViewbox} they get the same instance.

to change that behavior add x:Shared="False" attribute

<Viewbox x:Key="SampleViewbox" x:Shared="False">

回答2:

I think a good approach is to use DataTemplate. So you will have

<DataTemplate x:Key="SampleViewbox">
    <Viewbox>
        <Grid>
            <Ellipse
                    Width="128"
                    Height="128"
                    Fill="#d5273e"
                    Stroke="#e2e2e0"
                    StrokeThickness="6" />
        </Grid>
    </Viewbox>
</DataTemplate>

And for style

<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="Transparent">
                    <ContentPresenter ContentTemplate="{StaticResource SampleViewbox}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

回答3:

Setting the x:Shared attribute of the ViewBox to false as suggested by @ASh will indeed work but why don't you just include the ViewBox in the ControlTemplate like this?

<Style x:Key="SampleStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="Transparent" >
                    <Viewbox>
                        <Grid>
                            <Ellipse Stroke="#e2e2e0" StrokeThickness="6" Fill="#d5273e" Width="128" Height="128"/>
                        </Grid>
                    </Viewbox>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

A template is a template and a control instance is an instance.

来源：https://stackoverflow.com/questions/42924151/content-of-a-button-style-appears-only-in-one-button-instance

标签

.net

wpf

data-binding

wpf-controls