How to click TextBox (or Label) to toggle checkbox - wpf

I have a WPF app with the follow XAML
<CheckBox IsChecked="{Binding IsTime}" />
<TextBlock Text="Time" />
What I'd like is if the user clicks the textbox, it will toggle the CheckBox. In the same way we can use label and a checkbox in MVC.NET (well, HTML)
I could do this with events in the code behind but I'm using MVVM and as such, don't want to use those events.
The difference between my question and Change a Label's behavior to support toggling by click in WPF is that I'm already binding my CheckBox to something...
I hope this effort provides a clearer idea on what I'm trying to do
<CheckBox IsChecked="{Binding IsTime}" x:Name="Checky" />
<TextBlock Text="Time">
<TextBlock.Style>
<Style>
<Style.Triggers>
<Trigger Property="TextBlock.MouseDown" Value="True">
<Setter TargetName="Checky" Property="IsChecked" Value=Not IsTime> //WHAT TO DO HERE
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>

You can put the TextBox and other controls inside the CheckBox. This way clicking the TextBox will also toggle the CheckBox. Here's an example with multiple items inside the CheckBox, but you could of course have only the TextBox inside it.
<CheckBox Padding="2" IsChecked="{Binding IsTime}">
<StackPanel Orientation="Horizontal">
<Image Width="24" Height="24" Source="someimage"/>
<TextBlock Text="Time"/>
</StackPanel>
</CheckBox>

Use the code in the link you have provided and bind IsChecked to the same property:
<StackPanel>
<CheckBox x:Name="checkbox" IsChecked="{Binding IsTime}"/>
<CheckBox IsChecked="{Binding IsTime}" Content="Hello">
<CheckBox.Template>
<ControlTemplate TargetType="CheckBox">
<ContentPresenter/>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
</StackPanel>
You know that you have a Content property on the CheckBox which can be templated to achieve the desired effect without having to use multiple CheckBox-es.

Related

Create combobox with different items design using data trigger

I have defined the names and color in the backend using C# so I want to select the item cat and change it's other elements.
You don't show the XAML you are using to set up the ComboBox but best approach is to use a data template to set up the ComboBox items however you wish them to look. If you want the color box to not be shown if the Color brush is null, you could then add a trigger to the template to make it Hidden. Note that if you make it collapsed it will realign the layout of the other controls.
<DataTemplate x:Key="cbDataTemplate">
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="clrBox" Fill="{Binding Color, TargetNullValue=Transparent}"
Stroke="Black" StrokeThickness="2" Width="16"/>
<TextBlock Text="{Binding Name}" Margin="10,0,0,0"/>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Color}" Value="{x:Null}">
<Setter TargetName="clrBox" Property="Visibility" Value="Hidden"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
then to use this DataTemplate simply add it to the ComboBox like this:
<ComboBox ItemTemplate="{StaticResource cbDataTemplate}" Width="150"/>
hope that's helpful...

ListBox item template depends on item values

In WPF, MVVC applicaiton I have quite normal listbox:
<ListBox ItemsSource="{Binding Friends}">
</ListBox>
Then each item of list uses following datatemplate:
<DataTemplate DataType="{x:Type model:Friend}">
<Border BorderThickness="1" BorderBrush="Gray" Padding="3" Name="border" Margin="3">
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Horizontal">
<TextBlock Name="DescriptionDTDataType" Text="{Binding Path=ConnectedUserID}" />
<TextBlock Name="StatusTitle" Margin="8,0,4,0">Status:</TextBlock>
<TextBlock Name="Status" Text="{Binding Path=Approved}" />
<Button Content="Approve" Command="{x:Static inf:Commands.ApproveUserConnection}" CommandParameter="{Binding}"></Button>
<Button Content="Disapprove" Command="{x:Static inf:Commands.DisapproveUserConnection}" CommandParameter="{Binding}"></Button>
</StackPanel>
</Border>
</DataTemplate>
The question is... I want to hide one of the buttons on the basic of Friend.Approved property. For example if Friend.Approved has value "approved" I want to hide button Approved and show only button Dissaprove. On the other hand if Friend.Approved has value "disapproved" then I want opposite. How to achieve this?
Thank you.
Beside creating a IValueConverter there is a pure XAML solution using DataTriggers
Just add this to your DataTemplate:
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Approved}" Value="approved" >
<Setter TargetName="Approve" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<DataTrigger Binding="{Binding Approved}" Value="disapproved" >
<Setter TargetName="Disapprove" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
And name your buttons:
<Button Name="Approve" Content="Approve" ...></Button>
<Button Name="Disapprove" Content="Disapprove" ...></Button>
However if you want to reuse this hiding logic in multiple places in multiple DataTemplates its better to write the Approved text to Visibility converter.
Bind the Buttons Visibility property to Approved and use a value converter to convert Approved to a Visibility value.

Silverlight Style control

I have added a check box in silverlight style.
<Style x:Key="DataGridColumnHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Content="Add to Template" x:Name="chkAllDelimited" Checked="chkAllDelimited_Checked" Unchecked="chkAllDelimited_Unchecked"
VerticalAlignment="Center" IsChecked="false" HorizontalAlignment="Center" HorizontalContentAlignment="Left"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
How to get this x:Name="chkAllDelimited" control in the code behind?
Thanks in advance...
Embedded inside a style as is you can't. An option you do have is adding an OnLoad event to the checkbox which would fire in your code behind, where you could then cast the sender to a CheckBox object and access it, store it in a local variable, or whatever you'd like to do with it.

Use checkbox as togglebutton in expander

Im quite new to wpf and have to following problem.
I need to create a List (i am using a listbox) of items that can be expanded (expander).
The problem is, that they can be expanded, only if they have been 'selected'.
Each listboxitem should have a checkbox and some text.
So very basic example to illustrate what i mean:
<listbox>
<item>(checkbox) John Doe</item>
<item>(checkbox) Mike Murray</item>
</listbox>
If any (so multiple is allowed) of the checkboxes in the listbox are checked, then
the item expands showing more data.
Again an example:
<listbox>
<item>
(checkbox-checked) John Doe
Some extra data shown in expanded area
</item>
<item>
(checkbox-unchecked) Mike Murray</item>
</listbox>
I cant get a expander to use a checkbox as 'togglebutton'.
Could anyone help me out? Some example code would be very welcome...
This should do the trick:
<ListBox>
<ListBox.Resources>
<Style TargetType="Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<CheckBox
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Content="{TemplateBinding Header}"
/>
<ContentControl
x:Name="body"
Grid.Row="1" Content="{TemplateBinding Content}"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="False">
<Setter TargetName="body" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<Expander Header="One">
Content one
</Expander>
<Expander Header="Two">
Content two
</Expander>
</ListBox>
I've defined a Style here that changes the Template of any Expander controls to which the Style is applied. (And since I've put the Style in the ListBox.Resources it'll automatically apply to an Expander controls in the list.)
The trick to getting the CheckBox to work is that when you put it (or indeed any ToggleButton based control) into an Expander template, you need to use a data binding configured with its RelativeSource set to the TemplatedParent. This enables two-way binding - it means that not only does the CheckBox reflect the current state of the expander, it is also able to change the current state.
All you need to add a check box in the header is this code:
<telerik:RadExpander.Header>
<StackPanel Orientation="Horizontal">
<CheckBox VerticalAlignment="Center"/>
<TextBlock Margin="5,0,0,0">Legend</TextBlock>
</StackPanel>
</telerik:RadExpander.Header>
I am using Rad Control, The same can be done using the standard expander

wpf button trigger doesnt work as it should

I have a simple button. I want to switch it's template(or style ...)when it is being preesed.
I want to change from this
<DataTemplate>
<Button Click="Button_Click"
DataContext="{Binding}"
Height="65" Width="79"
Background="Black"
Content="{Binding Path=CardWasFounded}"/>
</DataTemplate>
to this :
<DataTemplate>
<Button Click="Button_Click"
DataContext="{Binding}"
Height="65" Width="79"
Background="{Binding Path=ButtonColor}"
Content="{Binding Path=CardWasFounded}"/>
</DataTemplate>
EDIT
After i have done
<DataTemplate>
<Button Name="btn"
Click="Button_Click"
DataContext="{Binding}"
Height="65" Width="79"
Background="Black"/>
<DataTemplate.Triggers>
<Trigger SourceName="btn" Property="IsMouseCaptured" Value="True" >
<Setter TargetName="btn" Property="Background" Value="Green"/>
<!--"{Binding Path=ButtonColor}"-->
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
It's still doesn't work I think it's because the .net default or something when the mouse is over the button its get's the blue defult color insted of my green or my binding ...
My goal its when its clicked to hook up a binding to color and a storyboard
can someone help me achive it ?
You can achieve this effect with a trigger. You could set a trigger that changes the Background property to your desired value when the button's IsPressed property (or some similar property) equals true.
For more information, take a look at:
http://en.csharp-online.net/WPF_Styles_and_Control_Templates%E2%80%94Property_Triggers

Resources