Question

我希望在WPF中创建一个自定义控件，该控件包含两个按钮（或其他可以检测点击事件的组件）。

由于我希望控件包含两个具有自定义形状的按钮，因此我不确定最佳做法是什么。

我正在考虑一个看起来像这样的控件：

我将如何创建它？

Answer 1

您可以为此使用UserControl

继续并创建一个新的UserControl并在此处添加此xaml代码

    <Grid >
        <!--makes rounded control, delete OpacityMask and the BorderMask if you don't need that-->
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=BorderMask}" />
        </Grid.OpacityMask>
        <Border Background="Black" x:Name="BorderMask" CornerRadius="10"/>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!--First Button-->
            <Button Background="Cyan" Grid.Row="0"/>
            <!--Second Button-->
            <Button Background="Gray" Grid.Row="1"/>

            <!--YOUR CONTENT-->
            <Ellipse Grid.RowSpan="2"
                     Fill="Red"
                     Margin="10"/>
        </Grid>
    </Grid>

如果您需要在圈子中添加一些内容

 <Grid >
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=BorderMask}" />
        </Grid.OpacityMask>
        <Border Background="Black" x:Name="BorderMask" CornerRadius="10"/>

        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!--First Button-->
            <Button Background="Cyan" Grid.Row="0"/>
            <!--Second Button-->
            <Button Background="Gray" Grid.Row="1"/>


            <!--Content Grid-->
            <Grid Grid.RowSpan="2" Margin="20">
                <Grid.OpacityMask>
                    <VisualBrush Visual="{Binding ElementName=EllipseMask}" />
                </Grid.OpacityMask>
                <Ellipse Fill="Black" x:Name="EllipseMask" />

                <!--this rectangle here is only an example ,
                    you should replace it with your content-->
                <Rectangle Fill="AliceBlue"/>

            </Grid>

        </Grid>
    </Grid>

如果您需要其他或其他功能，只需评论或编辑问题即可：）

具有两个自定义形状按钮的WPF自定义控件

1 个答案: