Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Circle checkbox style in WPF

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 8.78k
    Comment on it

    Creating style for circle checkbox:

     

    <Style TargetType="CheckBox" x:Key="CircleCheckbox">
                <Setter Property="Cursor" Value="Hand"></Setter>
                <Setter Property="Content" Value=""></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type CheckBox}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="24"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="24"></ColumnDefinition>
                                    <ColumnDefinition ></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Border Background="White" BorderBrush="#C6C6C6" BorderThickness="1" CornerRadius="0" Width="20" Height="20" VerticalAlignment="Center"  >
                                    <Grid>
                                        <Ellipse x:Name="outerEllipse" Grid.Column="0" Fill="Blue" Margin="2">
                                        </Ellipse>
                                    </Grid>
                                </Border>
                                <ContentPresenter Grid.Column="1" x:Name="content" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
    
    
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="outerEllipse" Property="Fill" Value="Red">
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="outerEllipse" Property="Fill" Value="Blue">
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
         </Style>

     

    Adding style to checkboxes:

       <CheckBox  Grid.Row="1" Content="Checkbox1" Style="{StaticResource CircleCheckbox}" Margin="1,2,14,-2">
            </CheckBox>
            <CheckBox  Grid.Row="1"  Content="Checkbox2"  Style="{StaticResource CircleCheckbox}" Margin="0,54,0,-54">
            </CheckBox>
            <CheckBox Grid.Row="1" Content="Checkbox3" Style="{StaticResource CircleCheckbox}" Margin="1,100,-1,-100">
            </CheckBox>	

     

    OUTPUT:

    Default CheckBox

    On Click of CheckBox

    Blue color is for unchecked checkbox and red color is for checked checkbox. You can also remove circle in case of unchecked checkbox  by simply changing the color as:

    <Trigger Property="IsChecked" Value="False">
          <Setter TargetName="outerEllipse" Property="Fill" Value="White">
          </Setter>
    </Trigger>

    and  then the output is:

    Hope, this code will help you. Thanks 

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: