Пользовательский элемент управления WPF с двумя пользовательскими кнопками

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>

, если вы хотите что-то еще или дополнительное, просто прокомментируйте или отредактируйте свой вопрос:)