Как использовать Blend для создания кнопок из рисунка круговой дорожки - PullRequest
Новая
       60

Как использовать Blend для создания кнопок из рисунка круговой дорожки

0 голосов
/ 17 декабря 2018

У меня есть следующий рисунок в Blend для сообщества Visual Studio:

Picture of my blend Artboard

Используя изображение слева, я хотел бы создать кнопкудля каждого сегмента пирога, используя геометрию пути, чтобы у меня было 9 отдельных кнопок (8 ребер и центр).Я бы хотел, чтобы готовая группа кнопок хорошо сочеталась друг с другом, как на картинке.Я никогда не использовал смесь раньше, поэтому я честно не знаю, с чего начать.Кажется, мне нужно было бы выделить каждый путь и создать для него кнопку, но я не знаю, как, и 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>
...