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

空头熊

我正在寻找在WPF中创建一个自定义控件的方法,该控件包含两个按钮(或其他可以检测单击事件的组件)。

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

我在想一个看起来像这样的控件:

带有两个按钮的自定义WPF控件

我将如何创建它?

您可以使用用户控件

继续并创建一个新的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>

如果您想要其他或其他内容,请评论或编辑您的问题:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章