實現圓環形按鈕佈局

實現下圖佈局
這裏寫圖片描述

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="500">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Width="80" Height="40">
                            <Path x:Name="TEMP_PATH" VerticalAlignment="Bottom" Stroke="CadetBlue" StrokeThickness="2" StrokeDashCap="Round"
                                  Fill="CadetBlue">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,10" IsClosed="True">
                                            <LineSegment Point="10,40"/>
                                            <ArcSegment Size="150,150" Point="70,40" SweepDirection="Clockwise"/>
                                            <LineSegment Point="80,10"/>
                                            <ArcSegment Size="150,150" Point="0,10" SweepDirection="Counterclockwise"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="TEMP_PATH" Property="Fill" Value="LightBlue">
                                    </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Border Width="300" Height="300">
            <Grid>
                <!--<Ellipse Width="200" Height="200" Stroke="LightBlue" StrokeThickness="1"></Ellipse>
                <Ellipse Width="250" Height="250" Stroke="LightBlue" StrokeThickness="1"></Ellipse>-->

                <Button Content="s1" HorizontalAlignment="Center" Margin="-63,-96,283,356">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="-135"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="23,-112,197,372">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="-90"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="96,-63,124,323">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="-45"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="110,23,110,237">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="60,93,160,167">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="45"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="-23,109,243,151">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="90"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="-91,58,311,202">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="135"></RotateTransform>
                    </Button.RenderTransform>
                </Button>

                <Button Content="s1" HorizontalAlignment="Center" Margin="-108,-27,328,287">
                    <Button.RenderTransform>
                        <RotateTransform CenterX="150" CenterY="150" Angle="180"></RotateTransform>
                    </Button.RenderTransform>
                </Button>
            </Grid>

        </Border>


    </Grid>
</Window>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章