How to highlight only one button out of 4 buttons - wpf

I have 4 buttons on the screen. When i click one button i am loading Grid data on the same UI.
When I click 2nd button I am just clearing old data and binding new data for the corresponding grid.
I just want to highlight only one Button once i Clicked it.
I am using MVVM pattern so.. need to fix this issue only in XAML.
Example:
I clicked 1st button it will load data on the grid based on selection.
Now button 1 should be highlighted.
When I click on 2nd button. Button 1 should be in normal state and 2nd button should be highlighted.
Only one Button highlight should be in highlighted mode until we are on the view.

You should use WPF triggers. In your case it's IsPressed. Simple example:
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="1"/>
</Trigger>
Here is a complete example that works for me
<Window.Resources>
<Style x:Key = "TriggerStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property = "IsPressed" Value = "True">
<Setter Property = "Background" Value = "Red" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button x:Name="button" Style = "{StaticResource TriggerStyle}" Content="Button" HorizontalAlignment="Left" Margin="103,45,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button1" Style = "{StaticResource TriggerStyle}" Content="Button" HorizontalAlignment="Left" Margin="163,130,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
If it still doesn't work then maybe you should post your xaml.

I think you are looking for RadioButtons.
<Window.Resources>
<ControlTemplate x:Key="RbTemplateKey" TargetType="RadioButton">
<ToggleButton IsChecked="{Binding IsChecked, Mode=TwoWay,RelativeSource={RelativeSource AncestorType=RadioButton, Mode=FindAncestor}}"/>
</ControlTemplate>
</Window.Resources>
<Grid>
<StackPanel Margin="141,148,161,0" Orientation="Horizontal" Background="AliceBlue">
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
<RadioButton Width="25" Height="25" Margin="10" Template="{StaticResource RbTemplateKey}"/>
</StackPanel>
</Grid>

Related

Images and Buttons not filling grid cells WPF XAML

So I have 2 similar problems with the below image. The image is of a UserControl that has been added to a viewbox inside another UserControl:
Image
The button in the top-left does not fill the whole of the grid cell, but the image within it fills the whole button .I have been trying out different methods of binding button images. This is why this is not the same for the other buttons in the grid. However I can't see how they should differ
The black images on the centre top, left, right, and bottom buttons don't fill their buttons. However, when editing the code, the designer shows them filling those buttons. The code for these is identical to the ContentControl above, but has an image path linking to a completely black image instead.
Was wondering if these problems might be related or have a similar fix? I've tried using extra viewboxes and stretch to fill/ alignment parameters but they seem to make no difference.
EDIT:
Implementing Location.xaml in parent UserControl:
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Margin="10 10 10 10">
<ContentControl Content="{Binding CurrentLocationViewModel}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type locationViewModel:SmallRoomViewModel}">
<locationView:SmallRoomView/>
</DataTemplate>
<DataTemplate DataType="{x:Type locationViewModel:LargeRoomViewModel}">
<locationView:LargeRoomView/>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Viewbox>
SmallRoomView.xaml (the UserControl in the image):
<Grid>
<Grid.Resources>
<Button x:Key="wallTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appWallTile}"/>
<Button x:Key="floorTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appFloorTile}"/>
<Button x:Key="doorTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appDoorTile}"/>
</Grid.Resources>
<Button Grid.Row="0" Grid.Column="0" PreviewMouseDown="OnMouseDown">
<Image Stretch="Fill" Source="{Binding tile0_0}"/>
</Button>
<ContentControl Grid.Row="0" Grid.Column="2" Content="{StaticResource doorTile}"/>
<ContentControl Grid.Row="0" Grid.Column="3" Content="{StaticResource wallTile}"/>
...
</Grid>
App.xaml:
<Style x:Key="appDoorTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/doorTile.png"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="appFloorTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/floors/floorTile.png"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="appWallTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/walls/wallTile.png"/>
</Setter.Value>
</Setter>
</Style>

WPF - Radio button control template binding "IsChecked" not working

I have a control template like below, and I want to get IsChecked property when user selects a radio button.
But when user select radio button "A" it's IsChecked property still show false. Why?
<ControlTemplate x:Key="RadioBtnTemplate" TargetType="{x:Type RadioButton}">
<Grid>
<StackPanel Margin="5">
<RadioButton Name="tempbtn" IsChecked="{TemplateBinding IsChecked}" FontFamily="Segoe UI" FontSize="18.667" Content="{TemplateBinding Content}" GroupName="{TemplateBinding GroupName}"/>
</StackPanel>
</Grid>
</ControlTemplate>
and I use this template:
<RadioButton GroupName="CG" x:Name="_rdoBtnA" Content="A" Template="{DynamicResource RadioBtnTemplate}" IsChecked="True"/>
<RadioButton GroupName="CG" x:Name="_rdoBtnB" Content="B" Template="{DynamicResource RadioBtnTemplate}" />
<RadioButton GroupName="CG" x:Name="_rdoBtnC" Content="C" Template="{DynamicResource RadioBtnTemplate}" />
If we take your example as is then you have two problems which cause the problems you are seeing.
Issue 1:
Firstly your design has created six not three <RadioButton> controls. The three in the <StackPanel> and then three that are created as part of the control template. All six radio buttons are now linked as part of the GroupName="CG" group.
As you know because they all belong to the same CG group only one of the six radio buttons can have the IsChecked property set to True. The three named controls _rdoBtnA, _rdoBtnB and _rdoBtnC are not even visible on the screen so they can never be set to True (and in the case of _rdoBtnA is promptly set to False from the XAML declared True the moment the template control is bound).
To resolve this situation, remove the GroupName="{TemplateBinding GroupName}" from the control template definition leaving only the three top level radio buttons in the group.
Issue 2: This is the issue I thought was the root of your problem to begin with. IsChecked={TemplateBinding IsChecked} is only OneWay binding and will not update the other way. To make the binding TwoWay you need to use the long-hand version of the binding definition, IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
The control template now becomes this by making those two changes.
<ControlTemplate x:Key="RadioBtnTemplate" TargetType="{x:Type RadioButton}">
<Grid>
<StackPanel Margin="5">
<RadioButton Name="tempbtn" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" FontFamily="Segoe UI" FontSize="18.667" Content="{TemplateBinding Content}" />
</StackPanel>
</Grid>
</ControlTemplate>
you can use it this way:
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border x:Name="SwatchBorder" BorderThickness="1">
<Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="SwatchBorder" Property="BorderBrush" Value="Yellow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</StackPanel.Resources>
<RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
GroupName="CropGuidesColourRadioButtonGroup"
IsChecked="{Binding Checked}" Margin="2" Background="Red" />
<RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
GroupName="CropGuidesColourRadioButtonGroup"
IsChecked="{Binding Checked}" Margin="2" Background="Black" />
</StackPanel>
taken from StackOverFlow

Customized MultiSelectList in windows phone 8 app

In my app, when i am clicking on a button btn_setting this convas visibility is visible so it is showing like a popup having multiselect list with OK and Cancel buttons but the problem i am facing is that i want to add items in multiselectlist dynamically with checkbox border colour blue and foreground color to be black and the most important after every item i want a horizontal blue-line as a separator between two items.
I put foreground ="Black" for MultiSelectList but itis showing the white colour for the items.
<Canvas x:Name="Setting_popup" Width="485" Height="770" Visibility="Collapsed">
<Border Margin="10" >
<StackPanel Background="White">
<toolkit:MultiselectList x:Name="Setting_list" Background="Blue" Width="456" Height="700" FontWeight="Bold" Foreground="Black">
<CheckBox Content="Celsius" />
<CheckBox Content="Fahrenheit"/>
<CheckBox Content="Kelvin"/>
<CheckBox Content="Rankine"/>
</toolkit:MultiselectList>
<StackPanel Orientation="Horizontal">
<Button x:Name="btn_OK" Content="Ok" Width="223" HorizontalAlignment="Left" Foreground="White" Background="#FF3498DB" />
<Button x:Name="btn_Cancel" Content="Cancel" Width="223" HorizontalAlignment="Right" Foreground="White" Background="#FF3498DB" Click="Button_Click_1" />
</StackPanel>
</StackPanel>
</Border>
</Canvas>
You can change the check boxes style, for example:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CheckBoxStyle1" TargetType="CheckBox">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="Foreground" Value="Black"/>
</Style>
</phone:PhoneApplicationPage.Resources>
And then set the style to each check box:
<toolkit:MultiselectList x:Name="Setting_list" Width="456" Height="400" >
<CheckBox Content="Celsius" Style="{StaticResource CheckBoxStyle1}" />
<CheckBox Content="Fahrenheit" Style="{StaticResource CheckBoxStyle1}"/>
<CheckBox Content="Kelvin" Style="{StaticResource CheckBoxStyle1}"/>
<CheckBox Content="Rankine" Style="{StaticResource CheckBoxStyle1}"/>
</toolkit:MultiselectList>

wpf mouseover margin in stackpanel

I have a tab item, header having the following form: image_margin_textblock.
The trigger IsMouseOver is working properly when the mouse cursor is over the image, and also over the textblock. But, when the mouse cursor is over the margin between the Image and Textblock, the IsMouseOver trigger is not fired. This creates an annoying flickering effect.
Do you have any ideas how to achieve mouseover trigger over the margin?
Here is the code:
<TabItem.Header>
<ContentControl>
<ContentControl.Template>
<ControlTemplate>
<StackPanel x:Name="sp0" Orientation="Horizontal">
<StackPanel x:Name="sp1" Orientation="Horizontal" Background="Blue">
<Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="tab1.png"/>
</StackPanel>
<TextBlock Margin="10,0,0,0" Text="Tab1" VerticalAlignment="Center"/>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" Value="True">
<Setter TargetName="sp1" Property="StackPanel.Background" Value="Green"/>
</DataTrigger>
<Trigger SourceName="sp0" Property="IsMouseOver" Value="True">
<Setter TargetName="sp1" Property="StackPanel.Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
Thank you.
Set Background on outer StackPanel to Transparent so that margin also participates in HitTest (i.e. respond to mouse events).
Right now only image and TextBlock area responds to MouseOver event. Setting background to Transparent will work.
<StackPanel x:Name="sp0" Orientation="Horizontal" Background="Transparent">
Set background of your StackPanel to Transparent. This makes it visible to hit test.
<StackPanel x:Name="sp0" Orientation="Horizontal" Background="Transparent">
<StackPanel x:Name="sp1" Orientation="Horizontal" Background="Blue">
<Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="tab1.png"/>
</StackPanel>
<TextBlock Margin="10,0,0,0" Text="Tab1" VerticalAlignment="Center"/>
</StackPanel>

Style defined in a resource section for all controls in a window

When we define a Style in an XAML resource section & set it's TargetType property to a specific control type then we do not need to set Style property to control of that type. e.g.
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Content" Value="Style set for all buttons"/>
<Setter Property="Background" Value="Gray"/>
</Style>
</Window.Resources>
<Grid>
<Button Height="27" HorizontalAlignment="Left" Margin="119,56,0,0" Name="button1" VerticalAlignment="Top" Width="140" />
<Button Style="{x:Null}" Content="No Style" Height="27" HorizontalAlignment="Left" Margin="212,121,0,0" Name="button2" VerticalAlignment="Top" Width="141" />
<Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="296,183,0,0" Name="button3" VerticalAlignment="Top" Width="158" />
</Grid>
But when we want to define a style for all controls in a window then we need to add Style property to each control to have that defined style. e.g.
<Window.Resources>
<Style x:Key="Style1" TargetType="Control">
<Setter Property="Control.Background" Value="Gray"/>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource Style1}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="67,52,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
<Label Style="{StaticResource Style1}" Content="Label" Height="27" HorizontalAlignment="Left" Margin="189,99,0,0" Name="label1" VerticalAlignment="Top" Width="83" />
</Grid>
Can't we access style "Style1" with Button & Label in above example without setting Style property specifically in Button & Label controls?
Thanks in advance.
Similar question as to here
General consensus is that you cannot apply a style to something as esoteric as just the control. Considering the wide range of properties and controls, I can understand why the system rejects/ignores it. I would suggest maybe something like this to get you fairly close to what you would want:
<Style x:Key="general" TargetType="{x:Type Control}">
<Setter Property="Control.Background" Value="Green"/>
</Style>
<Style BasedOn="{StaticResource general}" TargetType="{x:Type Button}"/>
<Style BasedOn="{StaticResource general}" TargetType="{x:Type Label}"/>
<Style BasedOn="{StaticResource general}" TargetType="{x:Type CheckBox}"/>
Try <Style TargetType="Button" BasedOn="{StaticResource style1}"/> for buttons, other for labels and so on...

Resources