Keeping Canvas overflow in WPF

Question

Hi guys, I have a (hopefully) interesting question.

First of all what I'm trying to do here:

I'm trying to create a pie-chart-like set of buttons, later this control will be used within a touch enabled application. The control draws and looks just fine, also all of the behaviours are fine so far. However, one thing that I'm having issues with is the translations I do to all the pieces of the pie.

SO what I do is: I want margin n between the pie pieces, to create this margine I move all pieces away from the middle. This means that the pie piece that's facing UP will have a negative translation. This in turn means that the Canvas will clip a part of the top (due the top being at 14, -2 for example). Another thing that I've added are pieces of text which are also making the pie pieces quite a bit longer. See the image included for reference.

image

To the left you can see the clipping issue I'm talking about to the right you can see an arbitrarily translated version of the same thing.

Some code paste:

Main window XAML:

<controls:PieMenu Radius="100" Padding="10">
<controls:PieMenu.MenuItems>
    <controls:PieMenuItem Text="Employment" Brush="#FF33FF" Command="BrowseBack" />
    <controls:PieMenuItem Text="General" Brush="#9933FF" Command="BrowseBack" />
    <controls:PieMenuItem Text="Internships" Brush="#3333FF" Command="BrowseBack" />
    <controls:PieMenuItem Text="Bla" Brush="#3399FF" Command="BrowseBack" />
    <controls:PieMenuItem Text="Bla" Brush="#007AF5" Command="BrowseBack" />
</controls:PieMenu.MenuItems>

PieMenu XAML:

<UserControl x:Class="PieControlLibrary.PieMenu"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:self="clr-namespace:PieControlLibrary"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <!-- <CollectionViewSource x:Name="menuItemCollectionViewSource" Source="{Binding MenuItems, RelativeSource={RelativeSource AncestorType=self:PieMenu}}"/>-->
    <Style TargetType="{x:Type ListView}" x:Key="listViewStyle">
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <self:PieButton Radius="{Binding Radius, RelativeSource={RelativeSource AncestorType=self:PieMenu}}" 
                                    Degrees="{Binding Degrees, RelativeSource={RelativeSource AncestorType=self:PieMenu}}"
                                    Brush="{Binding Brush}"
                                    Command="{Binding Command}" 
                                    Text="{Binding Text}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <ListView x:Name="menuItemsView" ItemsSource="{Binding MenuItems, RelativeSource={RelativeSource AncestorType=self:PieMenu}}" Style="{StaticResource listViewStyle}" />
</Grid>

PieButton (this is what the pie menu items are converted to)

<UserControl x:Class="PieControlLibrary.PieButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:control="clr-namespace:PieControlLibrary"
         xmlns:TextOnPath="clr-namespace:Petzold.TextOnPath"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         >
<Grid>
    <Button HorizontalAlignment="Left" VerticalAlignment="Top" DataContext="{Binding RelativeSource={RelativeSource AncestorType=control:PieButton}}" Command="{Binding Command}">
        <Button.Template>
            <ControlTemplate>
                <Canvas >
                    <Path Data="{Binding PathData}" Fill="{Binding Brush}" Grid.Row="0" Grid.Column="0" />
                    <TextOnPath:TextOnPathControl PathFigure="{Binding TextPath}" Text="{Binding Text}" FontFamily="Consolas" FontSize="12" Foreground="Black" FontStretch="Normal" />
                </Canvas>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

Answer 1

I'm not sure if I understand your question, but when you draw your pie chart, just leave some extra space around the edges so you can move the pie pieces out from the center?

Answer 2

Perhaps you could use a RenderTransform when your pie pieces expand to shift or scale the image a tiny bit to keep it in bounds?