如何使用混合从饼图路径图片创建按钮

时间：2018-12-17 19:50:01

标签： wpf expression-blend

我在Blend for Visual Studio社区中有以下图形：

Picture of my blend Artboard

使用左侧的图片，我想使用“路径”几何图形为每个饼图段创建一个按钮，这样我就有9个单独的按钮（8个边缘和中心）。我希望完成的一组按钮很好地配合在一起，如图所示。我以前从未使用过Blend，所以说实话我不知道从哪里开始。似乎我必须将每个路径分开并为其创建一个按钮，但是我不知道如何，Google似乎并没有太大帮助。

感谢您的帮助。

XAML如下：

XAML 

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid RenderTransformOrigin="0.497,0.494" Margin="0,80.25,0,-80.25">
        <Ellipse Fill="#FF00FF1E" HorizontalAlignment="Left" Height="62" Margin="319.5,148,0,0" Stroke="Black" VerticalAlignment="Top" Width="62"/>
        <Ellipse Fill="#FF00FF1E" HorizontalAlignment="Left" Height="31" Margin="335,163.5,0,0" Stroke="Black" VerticalAlignment="Top" Width="31"/>
        <Path Data="M0.5,0.5 L10.034653,12.153465" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.653" Margin="330.875,155.125,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="10.535"/>
        <Path Data="M14.64604,17.789605 L24.347773,29.647278" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.858" Margin="359.423,190.017,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="10.702"/>
        <Path Data="M10.660108,0.5 L0.50000049,12.070379" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.57" Margin="359.652,155.938,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="11.16"/>
        <Path Data="M10.56632,13.612545 L0.5,25.076118" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.464" Margin="330.188,189.598,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="11.066"/>
        <Path Data="M0.5,0.5 L16.375,0.5" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="1" Margin="319,178.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="16.875"/>
        <Path Data="M0.5,0.5 L16.5,0.5" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="1" Margin="365,178.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17"/>
        <Path Data="M0.5,0.5 L0.5,15.75" Fill="#FF00FF1E" HorizontalAlignment="Left" Margin="350,148,0,0" Stretch="Fill" Stroke="Black" Width="1" Height="16.25" VerticalAlignment="Top"/>
        <Path Data="M0.5,0.5 L0.5,22.25" Fill="#FF00FF1E" HorizontalAlignment="Left" Margin="350,193.25,0,203" Stretch="Fill" Stroke="Black" Width="1"/>
        <Ellipse Fill="#FF00FF1E" HorizontalAlignment="Left" Height="5" Margin="348,176.5,0,0" Stroke="Black" VerticalAlignment="Top" Width="5"/>
        <Ellipse Fill="#FF00FF1E" Height="62" Margin="395.5,148,334.5,0" Stroke="Black" VerticalAlignment="Top"/>
        <Ellipse Fill="#FF00FF1E" Height="31" Margin="0,163.5,350,0" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="31"/>
        <Path Data="M0.5,0.5 L10.034653,12.153465" Fill="#FF00FF1E" Height="12.653" Margin="0,155.125,374.59,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="10.535"/>
        <Path Data="M14.64604,17.789605 L24.347773,29.647278" Fill="#FF00FF1E" Height="12.858" Margin="0,190.017,345.875,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="10.702"/>
        <Path Data="M10.660108,0.5 L0.50000049,12.070379" Fill="#FF00FF1E" Height="12.57" Margin="0,155.938,345.188,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="11.16"/>
        <Path Data="M10.56632,13.612545 L0.5,25.076118" Fill="#FF00FF1E" Height="12.464" Margin="0,189.598,374.746,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="11.066"/>
        <Path Data="M0.5,0.5 L16.375,0.5" Fill="#FF00FF1E" Height="1" Margin="395,178.5,380.125,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top"/>
        <Path Data="M0.5,0.5 L16.5,0.5" Fill="#FF00FF1E" Height="1" Margin="0,178.5,334,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="17"/>
        <Path Data="M0.5,0.5 L0.5,15.75" Fill="#FF00FF1E" Margin="0,148,365,0" Stretch="Fill" Stroke="Black" Height="16.25" VerticalAlignment="Top" HorizontalAlignment="Right" Width="1"/>
        <Path Data="M0.5,0.5 L0.5,22.25" Fill="#FF00FF1E" Margin="0,193.25,365,203" Stretch="Fill" Stroke="Black" HorizontalAlignment="Right" Width="1"/>
        <Ellipse Fill="#FF00FF1E" Height="5" Margin="0,176.5,363,0" Stroke="Black" VerticalAlignment="Top" HorizontalAlignment="Right" Width="5"/>
        <Path Data="M61.5,31 C61.5,47.844685 47.844685,61.5 31,61.5 C14.155315,61.5 0.5,47.844685 0.5,31 C0.5,14.155315 14.155315,0.5 31,0.5 C47.844685,0.5 61.5,14.155315 61.5,31 z" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="62" Margin="174.5,148,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="62"/>
        <Path Data="M30.5,15.5 C30.5,23.784271 23.784271,30.5 15.5,30.5 C7.2157288,30.5 0.5,23.784271 0.5,15.5 C0.5,7.2157288 7.2157288,0.5 15.5,0.5 C23.784271,0.5 30.5,7.2157288 30.5,15.5 z" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="31" Margin="190,163.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="31" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M0.5,0.5 L10.035,12.153" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.653" Margin="185.875,155.125,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="10.535" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M0.5,0.49999999 L10.202,12.357999" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.858" Margin="214.423,190.017,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="10.702" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M10.66,0.50000027 L0.5,12.07" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.57" Margin="214.652,155.938,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="11.16" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M10.566,0.50000041 L0.50000027,11.964" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="12.464" Margin="185.188,189.598,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="11.066" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M0.5,0.5 L16.375,0.5" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="1" Margin="174,178.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="16.875" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M0.5,0.5 L16.5,0.5" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="1" Margin="220,178.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M0.5,0.5 L0.5,15.75" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="16.25" Margin="205,148,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M0.5,0.5 L0.5,15.5" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="16" Margin="205,193.25,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1" d:LayoutOverrides="VerticalAlignment"/>
        <Path Data="M4.5,2.5 C4.5,3.6045695 3.6045695,4.5 2.5,4.5 C1.3954305,4.5 0.5,3.6045695 0.5,2.5 C0.5,1.3954305 1.3954305,0.5 2.5,0.5 C3.6045695,0.5 4.5,1.3954305 4.5,2.5 z" Fill="#FF00FF1E" HorizontalAlignment="Left" Height="5" Margin="203,176.5,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="5" d:LayoutOverrides="VerticalAlignment"/>

    </Grid>
</Window>

0 个答案:

没有答案
相关问题
最新问题