CODEWITHSUNDEEP
c#wpfxaml
dropbear
dropbear

Reputation: 1727

WPF custom control with two custom shaped buttons

I'm looking to create a custom control in WPF that consists of two buttons (or some other component that can detect a click event).

Since I would like the control to contain two buttons with custom shape I'm not sure on what the best practice would be.

I'm thinking a control that looks something like this:

Custom WPF-control with two buttons

How would I go about creating it?

Upvotes: 0

Views: 172

Answers (1)

Zer0
Zer0

Reputation: 1166

You can use UserControl for that

go ahead and create a new UserControl and add this xaml code here

    <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>

IF YOU NEED TO HAVE SOME CONTENT IN YOUR CIRCLE

 <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>

if you want something else or extra just comment or edit your question :)

Upvotes: 1

Related Questions