Question

我有一个（希望）有趣的问题。

首先我要在这里做些什么：

我正在尝试创建一个类似饼图的按钮组，稍后此控件将在启用触摸的应用程序中使用。控件绘制并且看起来很好，到目前为止所有的行为都很好。但是，我遇到的一件事就是我对馅饼的所有部分进行了翻译。

所以我所做的是：我想在饼图之间设置边距n，以创建边距我将所有部分从中间移开。这意味着面向UP的饼图将具有负面翻译。这反过来意味着Canvas将剪切顶部的一部分（例如，顶部为14，-2）。我添加的另一件事是文本片段也使得馅饼片更长一点。请参阅附带的图片以供参考。

image

在左侧，您可以看到我正在谈论的剪辑问题，您可以看到相同内容的任意翻译版本。

一些代码粘贴：

主窗口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（这是将饼图菜单项转换为的内容）

<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

我不确定我是否理解你的问题，但是当你绘制饼图时，只是在边缘留下一些额外的空间，这样你就可以将饼块从中心移出来？

Answer 2

也许你可以使用RenderTransform当你的饼图展开以移动或缩放图像以保持它的边界？

在WPF中保持画布溢出

2 个答案: