堆棧內存溢出
  簡體   English   中英

如何在網格中添加多個自定義形狀的按鈕？

[英]How to add multiple custom shaped buttons in a grid?

 原文  2019-11-08 10:21:52  3   1    c#/ wpf

問題描述

我需要在一個圓圈中創建 4 個按鈕。

每個藍色按鈕都可以單獨控制：

在此處輸入圖像描述

我已經使用 CombinedGeometry in.xaml 為按鈕制作了一個 ControlTemplate 並將這個模板分配給按鈕。 我的代碼的.xaml 文件如下：

<Window x:Class="WpfApp4.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="450">
<Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >
        <Grid>
            <Path Name="Border" Stroke="Black" StrokeThickness="1" Stretch="Fill">
                <Path.Data>
                    <CombinedGeometry GeometryCombineMode="Exclude">
                        <CombinedGeometry.Geometry1 >
                            <CombinedGeometry GeometryCombineMode="Exclude">
                                <CombinedGeometry.Geometry1 >
                                    <CombinedGeometry GeometryCombineMode="Exclude">
                                        <CombinedGeometry.Geometry1 >
                                            <CombinedGeometry GeometryCombineMode="Exclude">
                                                <CombinedGeometry.Geometry1>
                                                    <EllipseGeometry Center="50 50" RadiusX="100" RadiusY="100"></EllipseGeometry>
                                                </CombinedGeometry.Geometry1>
                                                <CombinedGeometry.Geometry2>
                                                    <EllipseGeometry Center="50 50" RadiusX="60" RadiusY="60"></EllipseGeometry>
                                                </CombinedGeometry.Geometry2>
                                            </CombinedGeometry>
                                        </CombinedGeometry.Geometry1>
                                        <CombinedGeometry.Geometry2>
                                            <RectangleGeometry Rect="50,-50 40,200">
                                                <RectangleGeometry.Transform>
                                                    <RotateTransform Angle="45" CenterX="50" CenterY="50"/>
                                                </RectangleGeometry.Transform>
                                            </RectangleGeometry>
                                        </CombinedGeometry.Geometry2>

                                    </CombinedGeometry>
                                </CombinedGeometry.Geometry1>
                                <CombinedGeometry.Geometry2>
                                    <RectangleGeometry Rect="50,-50 40,200">
                                        <RectangleGeometry.Transform>
                                            <RotateTransform Angle="135" CenterX="50" CenterY="50"/>
                                        </RectangleGeometry.Transform>
                                    </RectangleGeometry>
                                </CombinedGeometry.Geometry2>
                            </CombinedGeometry>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <RectangleGeometry Rect="-50,10 200,140">
                            </RectangleGeometry>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Path.Data>
            </Path>
            <Rectangle Name="FocusCue" Visibility="Hidden" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" SnapsToDevicePixels="True" ></Rectangle>
            <Border>
                <ContentPresenter  Name="Content" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" TextBlock.Foreground="White"></ContentPresenter>
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="Fill" Value="DarkRed" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

<Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="-48,-75,48,75">
        </Button>
    </Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="-97,176,97,-176">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="270"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="203,-25,-203,25">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
    <Grid Width="200" Height="85">
        <Button Template="{StaticResource ButtonTemplate}" Margin="152,225,-152,-225">
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="180"/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Grid>
</Window>

當前結果：

在此處輸入圖像描述

我使用 CombinedGeometry 和指定的邊距來定位我的按鈕。

我的問題是，我應該使用什么容器將這些按鈕放在一起？

以及如何避免指定的邊距？

編輯：

培根的當前結果

在此處輸入圖像描述

我在原始路徑上添加了一個黑色箭頭。

我想做一個觸發器來同時改變這兩條路徑的不同顏色。

這就是我現在所擁有的：

<ControlTemplate>
<Grid>

<Path><!-- original path --></Path>

<Path Stroke="Transparent" Width="100" Height="100">
    <Path.Data>
        <PathGeometry>
            <PathFigure IsClosed="True"  StartPoint="43,43">
                <LineSegment Point="57,57" />
                <LineSegment Point="60,40" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
    <Path.Style>
    <Style TargetType="{x:Type Path}">
        <Setter Property="Fill" Value="Black"/>
        <!-- only change the color of arrow
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="#3B3B3B"/>
            </Trigger>
        </Style.Triggers>
        -->
    </Style>
    </Path.Style>
</Path>
</Gird>

<!-- change both paths with Opacity
<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Opacity" Value="0.5"/>
    </Trigger>
</ControlTemplate.Triggers>
-->

</ControlTemplate>

1 個解決方案

解決方案1
 3 已采納  2019-11-08 14:34:07

我使用 rendertransformorgin 重新創建了您的示例，因此可以簡化事情，您可以使用視圖框來包含您的按鈕

編輯：正如對您帖子的評論中所解釋的，我將按鈕模板創建為四分之一圓，並在左下角進行了切割。 並以 90 度增量旋轉按鈕以閉合圓圈，然后將整個圓圈旋轉 45 度

我還添加了一個鼠標懸停，所以按鈕變紅，（我需要這個來檢查，鼠標懸停是否注冊整個封閉的矩形，或者只是形狀 - >鼠標懸停只觸發形狀）

SharedSizeGroup 使我使用正方形的 2 x 2 網格，並且視圖框縮放內容以適應

<Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >
        <Path Name="Border" Stroke="Black" Width="100" Height="100">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10 10" >
                        <ArcSegment Point="90 90" Size="85 85" IsLargeArc="false" SweepDirection="Clockwise" />
                        <LineSegment Point="60 90" ></LineSegment>
                        <ArcSegment Point="10 40" Size="55 55" IsLargeArc="false" SweepDirection="Counterclockwise" />
                        <LineSegment Point="10 10" ></LineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.Style>
                <Style TargetType="{x:Type Path}">
                <Setter Property="Fill" Value="Green"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Fill" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
    </ControlTemplate>
</Window.Resources>
<Grid Margin="10px">
    <Viewbox>
        <Grid RenderTransformOrigin="0.5,0.5" Grid.IsSharedSizeScope="True">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="45"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
                <ColumnDefinition SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition SharedSizeGroup="A"/>
                <RowDefinition SharedSizeGroup="A"/>
            </Grid.RowDefinitions>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <RotateTransform Angle="270"/>
                </Button.RenderTransform>
            </Button>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
            </Button>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <RotateTransform Angle="180"/>
                </Button.RenderTransform>
            </Button>
            <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                <Button.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Button.RenderTransform>
            </Button>
        </Grid>
    </Viewbox>
</Grid>

應該是這樣的

編輯：如您所見，使用部分波什形狀上的觸發器可以改變顏色

    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">

這是完整的代碼：

    <Window.Resources>
    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}" >
        <Grid>

        <Path Name="Border" Stroke="Black" Width="100" Height="100">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10 10" >
                        <ArcSegment Point="90 90" Size="85 85" IsLargeArc="false" SweepDirection="Clockwise" />
                        <LineSegment Point="60 90" ></LineSegment>
                        <ArcSegment Point="10 40" Size="55 55" IsLargeArc="false" SweepDirection="Counterclockwise" />
                        <LineSegment Point="10 10" ></LineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.Style>
                <Style TargetType="{x:Type Path}">
                    <Setter Property="Fill" Value="Gray"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Fill" Value="LightGray"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
            <Path Stroke="Transparent" Width="100" Height="100">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True"  StartPoint="43,43">
                            <LineSegment Point="57,57" />
                            <LineSegment Point="60,40" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
                <Path.Style>
                    <Style TargetType="{x:Type Path}">
                        <Setter Property="Fill" Value="Black"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=IsMouseOver}" Value="True">
                                <Setter Property="Fill" Value="DimGray"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </Grid>
    </ControlTemplate>
</Window.Resources>
<Grid Margin="10px">
    <Viewbox>
        <Grid>
            <Grid RenderTransformOrigin="0.5,0.5" Grid.IsSharedSizeScope="True">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="A"/>
                    <ColumnDefinition SharedSizeGroup="A"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition SharedSizeGroup="A"/>
                    <RowDefinition SharedSizeGroup="A"/>
                </Grid.RowDefinitions>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform Angle="270"/>
                    </Button.RenderTransform>
                </Button>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5">
                </Button>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform Angle="180"/>
                    </Button.RenderTransform>
                </Button>
                <Button Template="{StaticResource ButtonTemplate}" Grid.Column="1" Grid.Row="1" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <RotateTransform Angle="90"/>
                    </Button.RenderTransform>
                </Button>
            </Grid>
            <TextBlock Background="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center">Content</TextBlock>
        </Grid>
    </Viewbox>
</Grid>

帶有變色箭頭

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在WPF中創建自定義形狀的按鈕？ 具有兩個自定義形狀按鈕的WPF自定義控件 在數據網格視圖中添加多個按鈕 如何在WPF中制作自定義異形面板？ 圓形按鈕 XAML布局-如何在Web瀏覽器內部按鈕下方添加WebKitBrowser <Grid> 為自定義控件中的多個按鈕添加單獨的單擊事件 如何在網格acumatica上添加自定義操作按鈕 如何將自定義列添加到MvcContrib網格？ 如何在窗口中添加多個按鈕？ C＃
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM