Prevent tabbing to TextBlock when Visibility is Collapsed - wpf

I'am trying to create a trigger which removes a TextBlock from the tab navigation when the Visibility is Collapsed.
This is the style:
<Style x:Uid="Style_1" TargetType="TextBlock">
<Setter x:Uid="Setter_1" Property="TextOptions.TextFormattingMode" Value="{StaticResource TextFormattingMode}"/>
<Setter x:Uid="Setter_32" Property="TextOptions.TextRenderingMode" Value="{StaticResource TextRenderingMode}"/>
<Setter x:Uid="Setter_2" Property="TextBlock.FontFamily" Value="{StaticResource FontFamily}"/>
<Setter x:Uid="Setter_3" Property="SnapsToDevicePixels" Value="True"/>
<Setter x:Uid="Setter_4" Property="VerticalAlignment" Value="Center"/>
<Setter x:Uid="Setter_74" Property="UseLayoutRounding" Value="True"/>
<Setter x:Uid="Setter_5" Property="Foreground" Value="{StaticResource LabelForeground}"/>
<Setter x:Uid="Setter_7" Property="FontSize" Value="{StaticResource FontSize}"/>
<Style.Triggers>
<DataTrigger x:Uid="DataTrigger_2" Binding="{Binding Source={x:Static cs:ZoomLevel.Instance}, Path=ActualZoomLevelIsDefault}" Value="False">
<Setter x:Uid="Setter_33" Property="TextOptions.TextFormattingMode" Value="Ideal"/>
</DataTrigger>
<DataTrigger x:Uid="DataTrigger_100" Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Visibility}" Value="Collapsed">
<!--<Setter Property="IsEnabled" Value="False"/>-->
<!--<Setter Property="Control.IsTabStop" Value="False"/>-->
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
But the TextBlock still gains the focus if I tab to it. IsKeyboardFocusWithin is true when I focus to the TextBlock. I can set IsEnabled to false in my trigger to make it work, but I wonder why the attached property is not working. So my question is: why is the KeyboardNavigation property not working?
Example:
<TextBlock x:Uid="TextBlock_2" Grid.Column="1" Grid.Row="1" Margin="3,3,0,0" HorizontalAlignment="Right" Visibility="Collapsed">
<Hyperlink x:Uid="Hyperlink_2" Command="{Binding SelectRoutingMethods}">
<Run x:Uid="Run_2" Text="{Binding ContactPreferences}"/>
</Hyperlink>
</TextBlock>
The TextBlock is tabable but still visible in my example.

It's not your TextBlock that gets the focus. It's Hyperlink. I don't know why, it's not even in Visual Tree but it does. It seems like a bug. If you set its property Focusable to false it wont take focus anymore.
Here is complete simplified example:
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="Focusable" Value="True" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Visibility}" Value="Collapsed">
<Setter Property="Focusable" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox>Temp</TextBox>
<TextBlock Visibility="Visible" Grid.Row="1">
<Hyperlink Focusable="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TextBlock}, Path=Focusable}" Command="{Binding AddOptionalAddressCommand}">test</Hyperlink>
</TextBlock>
<TextBox Grid.Row="2" >Temp</TextBox>
</Grid>

Credits to #Shadowed for finding the issue with hyperlink.
Here is my alternativ solution: set the KeyboardNavigation.IsTabStop on Hyperlink based on the next UIElement visibility up the tree (which will be the TextBlock in this specific case.
<Hyperlink x:Uid="Hyperlink_2" KeyboardNavigation.IsTabStop="{Binding IsVisible,RelativeSource={RelativeSource AncestorType={x:Type UIElement}}}">

As answered by #Shadowed, it was Hyperlink that is getting the Focus. Not sure why this is happening as the Content should not get Focusif the parent is in Collapsed state.
Anyway, I can give you workaround for this.
<StackPanel>
<StackPanel.Resources>
<local:VisibilitytoFocusConverter x:Key="VisibilitytoFocusConv" />
</StackPanel.Resources>
<TextBox >Temp</TextBox>
<TextBlock Visibility="Collapsed" Height="20" KeyboardNavigation.TabNavigation ="{Binding Visibility, RelativeSource={RelativeSource Self}, Converter={StaticResource VisibilitytoFocusConv}}">
<Hyperlink Command="{Binding AddOptionalAddressCommand}" />
</TextBlock>
<TextBox >Temp</TextBox>
</StackPanel>
Converter:
public class VisibilitytoFocusConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
return ((Visibility)value) == Visibility.Visible ? "Local" : "None";
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo language)
{
return new NotFiniteNumberException();
}
}
Hope that helps.

Related

Set Image border when item is selected in a listbox

I ve been playing with this for a while and I can't make it work. Basically, I have a listbox with an image and a label. What I'd like is to change the color of the border of the image if that item is selected (the listbox is set to multiple selection)
This is I have so far...
<DataTemplate x:Key="ListBox_DataTemplate">
<Grid HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="220"/>
</Grid.RowDefinitions>
<Border x:Name="thumbBorder" BorderThickness="8"
CornerRadius="8">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding isSelected,
ElementName=lb_images}" Value="True">
<Setter Property="BorderBrush
Value="SteelBlue"/>
</DataTrigger>
<DataTrigger Binding="{Binding isSelected,
ElementName=lb_images}" Value="False">
<Setter Property="BorderBrush"
Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image Width="170" Height="190" Source="{Binding Thumbnail}"
HorizontalAlignment="Center"
VerticalAlignment="Top"
x:Name="thumb"/>
</Border>
However, nothing happens when I select the item. IIm really stuck, so any ideas would be welcome.
Thanks
Your DataTrigger should use a RelativeSource Binding to the ListBoxItem container element, and use the correct property path IsSelected:
<DataTemplate x:Key="ListBox_DataTemplate">
<Border BorderThickness="8">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Yellow"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Value="True">
<Setter Property="BorderBrush" Value="SteelBlue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Image Source="{Binding Thumbnail}"/>
</Border>
</DataTemplate>

Changing background color for a ComboBox, it's not changing color at all

I going crazy that I just can't change the color of the ComboBox. Have tried to use the background property right on the ComboBox but nothing happens.
Have also tried to use a Style block and set the background color, but that does also not work.
Code
<ComboBox Padding="7" Height="34" Background="#ffffff">
<ComboBox.Resources>
<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="Background" Value="red" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="black" />
</Style>
</ComboBox.Resources>
<ComboBoxItem IsSelected="True">1 - Room</ComboBoxItem>
<ComboBoxItem>2 - Rooms</ComboBoxItem>
<ComboBoxItem>3 - Rooms</ComboBoxItem>
<ComboBoxItem>4 - Rooms</ComboBoxItem>
<ComboBoxItem>5+ - Rooms</ComboBoxItem>
</ComboBox>
Even though that I have set the background color to white, It still only the standard grey color.
Here you can see how it looks:
Hope someone can tell me what I'm doing wrong?
here are several thing which in my opinion can help you:
Remove the Background definition from the ComboBox declaration(Background="#ffffff").
Move the combo items declaration to the combo holding Grid because of the fact that ItemTemplate and ItemTemplateSelector are ignored for items already of the ItemsControl's container.
Implement the data template selector to support data templates of combo (one for selected item, second for the items to select).
Here is the XAML code
<Grid>
<Grid.Resources>
<x:Array Type="{x:Type system:String}" x:Key="MyRoomsArray">
<system:String>1 - Room</system:String>
<system:String>2 - Rooms</system:String>
<system:String>3 - Rooms</system:String>
<system:String>4 - Rooms</system:String>
<system:String>5+ - Rooms</system:String>
</x:Array>
</Grid.Resources>
<ComboBox Padding="7" Height="34" SelectedIndex="0" ItemsSource="{StaticResource MyRoomsArray}">
<ComboBox.Resources>
<DataTemplate x:Key="ItemToSelect">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="Red"
BorderBrush="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}, Path=BorderBrush, UpdateSourceTrigger=PropertyChanged}"
BorderThickness ="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}, Path=BorderThickness, UpdateSourceTrigger=PropertyChanged}">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="{Binding }" />
</Border>
</Grid>
</DataTemplate>
<DataTemplate x:Key="SelectedItem">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}, Path=Background, UpdateSourceTrigger=PropertyChanged}"
BorderBrush="Transparent"
BorderThickness ="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}, Path=BorderThickness, UpdateSourceTrigger=PropertyChanged}">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="{Binding }" />
</Border>
</Grid>
</DataTemplate>
<wpfComboBAckground:ComboDataTemplateSelector x:Key="ComboDataTemplateSelector" Selected="{StaticResource SelectedItem}" ItemToSelect="{StaticResource ItemToSelect}"/>
<Style TargetType="ComboBox">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Red" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="ItemTemplateSelector" Value="{StaticResource ComboDataTemplateSelector}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Resources>
</ComboBox>
</Grid>
Here is the data template selector
public class ComboDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var selected = false;
// container is the ContentPresenter
FrameworkElement fe = container as FrameworkElement;
if (fe == null) return ItemToSelect;
var cbo = fe.TemplatedParent as ComboBox;
if (cbo != null)
selected = true;
return selected ? Selected : ItemToSelect;
}
public DataTemplate Selected { get; set; }
public DataTemplate ItemToSelect { get; set; }
}
How it looks like:
Regards.

Editable WPF ListBox contains textbox

I want to have dynamic editable listbox in wpf application. I am using textbox inside listbox, and I am binding Observable collection to that listbox. Now, I want to make textbox editable on mouse click. So, user can make change to textbox and save new textbox text.
<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="TextBoxList" Text="{Binding Path=urlString}" IsEnabled="False" >
</TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should use IsReadOnly property. In the trigger you should check IsFocused property.
In the following example, I changed foreground color to indicate which TextBox is in the edit mode.
Example:
<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="TextBoxList" Text="{Binding Path=urlString}" MinWidth="100">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Foreground" Value="Green"/>
<Setter Property="IsReadOnly" Value="False" />
</Trigger>
<Trigger Property="IsFocused" Value="False">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="IsReadOnly" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you want to allow users save changes after edit value in the TextBox, you can add button and show in the actual editing row:
<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBox Name="TextBoxList" Text="{Binding Path=urlString}" MinWidth="100">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Foreground" Value="Green"/>
<Setter Property="IsReadOnly" Value="False" />
</Trigger>
<Trigger Property="IsFocused" Value="False">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="IsReadOnly" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
<Button Content="Save" Grid.Column="1" Command="{Binding SaveChanges}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TextBoxList, Path=IsFocused}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My approach to accessing the text box (which was proving a nightmare) was to use your save button approach and in the Button's Button_Click function I used sender to retrieve the Button's parent, cast to (in your case) Grid. Then you can use that to access the Grid's Children with .Children[0] being your TextBox.
Bit of a Kluge because your code has to 'know' the type of the parent and the index of the child TextBox but these will not change. If necessary the purists can iterate through the Children to identify the required child explicitly.
Hope this helps someone.

How to change TreeViewItem background color according to property of bound data?

I have a TreeView where the data is bound to generic derived wrapper classes over my data hierarchy.
My bound wrapper classes include added fields like "IsHilighted" and "IsExpanded".
I would like to change the background of any TreeViewItem according to its bound data property "IsHiglighted". I would like to set the color of Hilighted item to the same (or lighter) color as the default Selected item background color.
Ideally, I would like to not modify existing XAML... I mean being able to eventually add the behavior through code.
UPDATE
I have found a partial solution: I had to add triggers as defined below. Code included below.
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsHilighted}" Value="true">
<Setter Property="Background" Value="SlateBlue"></Setter>
<Setter Property="Opacity" Value="160"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
Still not resolved: How could I bind the color of Hilighted item (see partial solution above) to the "Selected" TreeViewItem background color, i.e. replace "SlateBlue" on partial solution to binding to existing selected item style background color ?
Original TreeView XAML code:
<TreeView Name="TreeViewSelectScopeStudy" MinHeight="24" Margin="7" ItemsSource="{Binding Path=TvItemRootPssTreeViewRoot.ChildsView}" Height="Auto"
VerticalAlignment="Stretch"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<TreeView.Resources>
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded}"/>
</Style>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
<HierarchicalDataTemplate DataType="{x:Type scopeSelection:WrapperSimulatedInfoStudy}" ItemsSource="{Binding Path=Childs}">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Path=IsSelected}"></CheckBox>
<TextBlock Text="{Binding Path=TvItemName}" Margin="5,0,0,0"></TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type scopeSelection:WrapperSimulatedInfoSimulation}">
<StackPanel Orientation="Horizontal" ToolTip="{Binding Path=Item.InvalidityReason}">
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Item.IsValid}" Value="false">
<Setter Property="Opacity" Value="160"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<CheckBox IsChecked="{Binding Path=IsSelected}" IsEnabled="{Binding Path=Item.IsValid}" ToolTip="{Binding Path=Item.InvalidityReason}"></CheckBox>
<CheckBox IsChecked="{Binding Path=IsHilighted}"></CheckBox>
<TextBlock Text="{Binding Path=TvItemName}" Margin="5,0,0,0" ToolTip="{Binding Path=Item.InvalidityReason}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Item.IsValid}" Value="false">
<Setter Property="Background" Value="LightPink"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
You could define one more property called IsItemSelected and bind it to TreeViewItems IsSelected property (similar to how you have done for IsExpanded).
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded}"/>
<Setter Property="IsSelected" Value="{Binding Path=IsItemSelected}"/>
</Style>
Then you could define a DataTrigger for the IsItemSelected property and set the background color.
<DataTrigger Binding="{Binding Path=IsItemSelected}" Value="true">
<Setter Property="Background" Value="Blue"></Setter>
</DataTrigger>

Trigger with target name

I have a couple text boxes and collection of radio buttons in WPF. I want to use the trigger to set the IsChecked property of oly one radio button which has a name if any text boxes get focus. I check a few examples but I could not find what I looking for.
Remember, we are using MVVM pattern and no code behind.
I tried the following codes and have this compile error:
TargetName property cannot be set on a Style Setter
<UserControl.Resources>
<Style x:Name="myTest" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RadioButton.IsChecked" Value="True" TargetName="myRadioButton"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
I read other posts and DataTrigger fix the problem.
<Style x:Name="myTest2" TargetType="RadioButton" >
<Style.Triggers>
<DataTrigger Binding="{Binding IsFocused, ElementName=myTextBox}" Value="True">
<Setter Property="IsChecked" Value="True" ></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
Write styles for each RadioButton providing respective TextBox as triggering element. Following is an example for 3 TextBoxes & 3 RadioButtons.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="txtBox0" Grid.Row="0"/>
<TextBox x:Name="txtBox1" Grid.Row="1"/>
<TextBox x:Name="txtBox2" Grid.Row="2"/>
<StackPanel Grid.Row="3" Orientation="Horizontal">
<RadioButton GroupName="grp1" Content="txt1">
<RadioButton.Style>
<Style TargetType="RadioButton">
<Style.Triggers>
<DataTrigger Binding="{Binding IsFocused, ElementName=txtBox0}" Value="True">
<Setter Property="IsChecked" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</RadioButton.Style>
</RadioButton>
<RadioButton GroupName="grp1" Content="txt2">
<RadioButton.Style>
<Style TargetType="RadioButton">
<Style.Triggers>
<DataTrigger Binding="{Binding IsFocused, ElementName=txtBox1}" Value="True">
<Setter Property="IsChecked" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</RadioButton.Style>
</RadioButton>
<RadioButton GroupName="grp1" Content="txt3">
<RadioButton.Style>
<Style TargetType="RadioButton">
<Style.Triggers>
<DataTrigger Binding="{Binding IsFocused, ElementName=txtBox2}" Value="True">
<Setter Property="IsChecked" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</RadioButton.Style>
</RadioButton>
</StackPanel>
</Grid>
From MSDN:
You can set this property to the name of any element within the scope of where the setter collection (the collection that this setter is part of) is applied. This is typically a named element that is within the template that contains this setter.
TargetName is mostly used within control templates and not simply within styles like you are attempting to use it. What you can do is to bind your RadioButton's IsChecked DP to the IsMouseOver DP of the TextBox.
Create a ControlTemplate and add your trigger to ControlTemplate.Triggers
<ControlTemplate.Triggers>
<Trigger Property="HasText" Value="True">
<Setter Property="Visibility" TargetName="LabelText" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
I think you're looking for the GotFocus Event.
In XAML:
<TextBox x:Name="textBox1" GotFocus="tb_GotFocus"/>
<TextBox x:Name="textBox2" GotFocus="tb_GotFocus"/>
<TextBox x:Name="textBox3" GotFocus="tb_GotFocus"/>
<RadioButton x:Name="myRadioButton"/>
Then in your C# your event handler could look something like this
private void tb_GotFocus(object sender, RoutedEventArgs e)
{
myRadioButton.IsChecked = true;
}
If any of the TextBoxes gets focused it will check the RadioButton named myRadioButton.

Resources