Search code examples
wpfxamlradio-buttonexpression-blendrectangles

Making Rectangles to work like RadioButtons using Expression Blend


Suppose I have n number of rectangles. I want them to behave such that when I click on any rectangle it should be filled white and all other should be filled with black color.

I know that I can create a style. But while creating style I can tell the trigger that fill the rectangle with black color but how can I say that fill all the remaining rectangles with white color.

Can anyone suggest me? I want just a small hint.


Solution

  • Don't make rectangles work like RadioButtons, make RadioButtons look like rectangles.
    I would suggest to use RadioButton instead and change template to make it look like rectangle. Then you can trigger change of background based on RadioButton.IsChecked property. This way RadioButton will take care of tick/untick operation and trigger background change in other RadioButtons in the same group.

    <Style TargetType="{x:Type RadioButton}">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="{x:Type RadioButton}">
                   <Border BorderBrush="Black" BorderThickness="1" Background="Black" x:Name="PART_Border">
                      <ContentPresenter/>  
                   </Border> 
                   <ControlTemplate.Triggers>
                       <Trigger Property="IsChecked" Value="True">
                           <Setter TargetName="PART_Border" Property="Background" Value="White"/>
                       </Trigger>
                   </ControlTemplate.Triggers>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
    </Style>
    

    and use your RadioButton like this:

    <RadioButton>
       <RadioButton.Content>
          <!-- content to be displayer inside border -->
       </RadioButton.Content>
    </RadioButton>