CODEWITHSUNDEEP
c#wpfcornerradiuswpf-style
Ashish-BeJovial
Ashish-BeJovial

Reputation: 1867

How to create the round cross button for close popup in wpf?

I am working on wpf slider, i want a cross round button on the slider control, i have attached the image, can you please help me what style me should write to get attached design round cross button ?

i tried in following way but didn't work for me its created according to attached image 2

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid">
                            <Border x:Name="border" Background="Black" CornerRadius="15" BorderBrush="White" BorderThickness="1">
                                <ContentPresenter HorizontalAlignment="Center" TextElement.FontFamily="Arial Rounded MT Bold" VerticalAlignment="Center" TextElement.FontWeight="Bold"></ContentPresenter>
                            </Border>
                        </Grid>
                        <!--<ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="border">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.5" ScaleY="0.5"/>
                                                    <TranslateTransform X="0.02" Y="0.02"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>-->
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style

Upvotes: 0

Views: 1306

Answers (2)

user5088037
user5088037

Reputation:

Edit the ControlTemplate of Slider and add your styled button to the existing slider template. Docking can be helpful to place the button correctly onto the slider

Upvotes: 0

tinku92
tinku92

Reputation: 109

One approach is using dingbat fonts.

<Button FontFamily="Wingdings 2">U</Button>

'U' can be replaced by 'V' for thick circular button. It's case sensitive. I mean using 'u' instead 'U' produces different results.

Upvotes: 2

Related Questions