Question

In a Windows 8 (WinRT) app, I am creating my own XAML style to get a dotted rectangle. In the setter for the style, I use Property="StrokeDashArray" Value="1,4". I then create a bunch of rectangles, and then explicitly set the style of those rectangles to this style I created. The first rectangle shows up with a dotted border – but the other two don’t. However, if in addition to the Style={StaticResource myDottedStyle} I also specify the StrokeDashArray with each rectangle, then all them correctly show up with dotted borders.

Why is the dotted border only showing up for the first rectangle? How can I create a Style that is applied to all the rectangles without specifying the StrokeDashArray for each of them?

Here is a full code sample. In Windows 8 RTM, create a Blank XAML app project, and replace the Grid in the MainPage.xaml with the following:

<Page.Resources>
    <Style x:Key="myDottedStyle" TargetType="Rectangle">
        <Setter Property="Stroke" 
            Value="{StaticResource ApplicationForegroundThemeBrush}"/>
        <Setter Property="StrokeThickness" Value="2"/>
        <Setter Property="StrokeDashArray" Value="1,4"/>
    </Style>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Style="{StaticResource myDottedStyle}" Width="40" 
        HorizontalAlignment="Left"/>
    <Rectangle Style="{StaticResource myDottedStyle}" Width="40" 
        HorizontalAlignment="Center"/>
    <Rectangle Style="{StaticResource myDottedStyle}" Width="40" 
        HorizontalAlignment="Right"/>
</Grid>

Here is a screenshot of the output of this

I found a related question that talks about DataTemplates here but I can’t figure out how to translate that into my problem.

Answer 1

You could optimize things a bit by not requiring it to re-draw the rectangle per each instance and substitute for a ContentControl instead since they appear the same but with minor differences. So something for example like;

<Style x:Key="MyDottedStyle" TargetType="ContentControl">
    <!-- Add additional Setters Here -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Rectangle Stroke="{StaticResource ApplicationForegroundThemeBrush}"
                       StrokeThickness="2"
                       StrokeDashArray="1,4"
                       Width="40" Height="40"
                       HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                       Margin="{TemplateBinding Margin}"/>                                          
            </ControlTemplate>
        </Setter.Value>
    </Setter>                      
</Style>

    <!-- And now actually place it on your view -->
<ContentControl Style="{StaticResource MyDottedStyle}" HorizontalAlignment="Center"/>

This will allow you to not only clean things up because you can take your Style template and slap it over into say a Resource Dictionary to reduce clutter, but also makes it a little more efficient since you’re not re-drawing your shape every time it’s required. Hope this helps! Cheers!