ContentControl Rotate decorator rendering

Question

I have recently stumbled upon following issue: In my WPF application I've implemented a little designer, where you can put elements on canvas, move, scale and rotate them.

While searching the web I found following solution to this problem . This solution implements moving, scaling and rotating by System.Windows.Controls.Primitives.Thumb class so I thought I would just adjust this solution to my app and move on. The problem is, while on my machine everything is fine, on the others there are some rendering problems. I've made a screen shot of what I'm saying:

screenshot

I'm using Windows 7 even though I run my app on other Windows 7 and it is also rendered wrong. I run my app with Windows XP and other compatibility settings on my machine but I wasn't able to reproduce this bug. What is this about and what am I possibly doing wrong?

This is my xaml file I'm using for content control styling:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:COMPANY.WPUI.LayoutDesignModel.Thumbs">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="MoveThumb.xaml"/>
        <ResourceDictionary Source="ResizeDecorator.xaml"/>
        <ResourceDictionary Source="RotateDecorator.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="DesignerItemStyle" TargetType="ContentControl">
        <Setter Property="MinHeight" Value="50"/>
        <Setter Property="MinWidth" Value="50"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                        <Control Name="RotateDecorator" Template="{StaticResource RotateDecoratorTemplate}" Visibility="Collapsed"/>
                        <s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
                        <Control x:Name="ResizeDecorator" Template="{StaticResource ResizeDecoratorTemplate}" Visibility="Collapsed"/>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter TargetName="ResizeDecorator" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="RotateDecorator" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

A this is RotateDecorator.xaml file that happens to cause problems:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:COMPANY.WPUI.LayoutDesignModel.Thumbs">

    <Style TargetType="{x:Type s:RotateThumb}">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type s:RotateThumb}">
                    <Grid Width="30" Height="30">
                        <Ellipse Width="30" Height="30" Fill="#B0B0BB" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="RotateDecoratorTemplate" TargetType="{x:Type Control}">
        <Grid>
            <s:RotateThumb Margin="-18,-18,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <s:RotateThumb Margin="0,-18,-18,0" VerticalAlignment="Top" HorizontalAlignment="Right" />
            <s:RotateThumb Margin="0,0,-18,-18" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
            <s:RotateThumb Margin="-18,0,0,-18" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

score 0 · Answer 1 · answered Jun 22 '15 at 15:36

0

The first thing I think of whenever seeing something like this is the graphics cards. You can get some strange behaviors with certain graphics cards, especially if their drivers are not installed properly/up to date.

answered Jun 22 '15 at 15:36

Panh

225
1
9

score 0 · Answer 2 · edited May 23 '17 at 11:45

This is caused by MergedDictionaries. The Diagram Designer Project splits the Move, Resize, and Rotate actions into 3 separate dictionaries. From the screenshot you can see the resize thumb is loaded. In my case the move action also worked, but like the question the rotate thumbs weren't displayed. No errors were thrown, but examination with Snoop shows that it wasn't able to find the rotate dictionary.

This solution expands on what I've covered above: https://stackoverflow.com/a/17083360/978622

To solve: Combine the resource dictionaries into a single resource dictionary.

ContentControl Rotate decorator rendering

2 Answers2