Focus cursor is blinking in WPF - wpf

I have an textblock, expander and a textbox...
these are inside the header of a listview column.
TextBlock is for listview column name, on click of expander...textbox will be displayed...and user can seartch the listview based on that column. The textbox is collapsed by default.
My requirement is, when user click on the expander, textbox should be displayed to the user...and focus should be on the textbox.
With the below XAML, I am able to display the textbox on click of expander and set the focus(cursor) on my textbox. But that cursor is no blinking. I mean I have to again click on textbox to type something
Please help me to find out what the issue is...Any help would be appreciated.
<StackPanel>
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="ID"/>
<Expander x:Name="IdExp" DockPanel.Dock="Right" IsExpanded="False" ExpandDirection="Down" >
</Expander>
</DockPanel>
<TextBox x:Name="PropertyCCCIDSearch"
Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},
Path=DataContext.SearchCCGId.Value,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding ElementName=IdExp, Path=IsExpanded, Converter={x:Static local:Converters.BoolToVisibility}}" >
<TextBox.Style>
<Style>
<Style.Triggers> <DataTrigger Binding="{Binding ElementName=IdExp, Path=IsExpanded}" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=PropertyCCCIDSearch}"/> </DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>

Your code is working correctly this is what i tried
<Window.Resources>
<BooleanToVisibilityConverter x:Uid="BooleanToVisibilityConverter_1" x:Key="b2v" />
</Window.Resources>
<Grid>
<StackPanel>
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="ID"/>
<Expander x:Name="IdExp" DockPanel.Dock="Right" IsExpanded="False" ExpandDirection="Down" >
</Expander>
</DockPanel>
<TextBox x:Name="PropertyCCCIDSearch" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}},
Path=DataContext.SearchCCGId.Value,UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding ElementName=IdExp, Path=IsExpanded,
Converter={StaticResource b2v}}" >
<TextBox.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=IdExp, Path=IsExpanded}" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=PropertyCCCIDSearch}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
</Grid>
</Window>

Related

ListBox change image on selection

I've got a list box with SelectionMode set to Single and item template looking like this:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="100" Margin="10" Cursor="Hand" >
<Image Source="/Assets/Images/folder_80closed.png" HorizontalAlignment="Center" />
<TextBox Text="{Binding Name}" BorderThickness="0" TextAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Is there any way to change the value of image Source property in XAML based on if the item is selected or not? Something like pic bellow, where item4 is selected.
You may use an Image Style with a DataTrigger on the IsSelected property of the current ListBoxItem:
<Image HorizontalAlignment="Center">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source"
Value="/Assets/Images/folder_80closed.png"/>
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Value="True">
<Setter Property="Source"
Value="/Assets/Images/some_other_image.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>

How to Use Trigger to Change RadioButton's StackPanel Background When the RadioButton is Checked

I have multiple RadioButton where a single one is composition of an Image and a TextBlock wrapped with StackPanel
<RadioButton
Tag="0"
Grid.Column="0"
Grid.Row="0"
Name="rdbOutlook">
<StackPanel>
<Image Source="Resources/outlook.png"
Stretch="Fill"
Width="50"/>
<TextBlock Text="Outlook/Hotmail" />
</StackPanel>
</RadioButton>
I want to set the StackPanel background to such a color when the RadioButton is checked.
How could do that by using Window.Resources to avoid code duplication and ease the modification?
You can use the following code for all RadioButtons containing a StackPanel:
<Window.Resources>
<Style TargetType="StackPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type RadioButton}}, Path=IsChecked}"
Value="True">
<Setter Property="Background" Value="Thistle" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>

WPF - How to change Image in DataGrid column upon selection of row (in XAML)?

Our project has a DataGrid that displays an image along with text in one of the columns. When a row is selected, since it's highlighted, the image is not visible correctly. Hence we want to change the image only for the selected row.
I know how to change the property such as background of the dataGridCell using <Style.Triggers>; but cannot figure out how to change Image that is embedded inside the <DataGridTemplateColumn.CellTemplate>. Can you please help me with this?
<DataGrid Name="dgCPAGrid" Grid.Row="2" Grid.Column="0" ItemsSource="{Binding CPAListDisplay, Mode=OneWay}" Margin="0,5,0,5" AutoGenerateColumns="False"
IsReadOnly="True" SelectionMode="Single"
SelectedItem="{Binding SelectedCPA, Mode=TwoWay}"
IsSynchronizedWithCurrentItem="False" AlternatingRowBackground="White"
HorizontalGridLinesBrush="Gray" VerticalGridLinesBrush="Gray" >
<DataGrid.Resources>
<Style x:Key="DGCellMGA" TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Setter Property="ToolTipService.IsEnabled" Value="False" />
<Setter Property="Background" Value="#f8f8d2" />
<Setter Property="TextBlock.TextAlignment" Value="Right"/>
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="{b:CaptionBinding gridHeaderCPAName}" Width="Auto" MinWidth="125">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CPAName}" />
<Image Source="/Images/TimelineIconGreenTransparent.gif" Margin="5,0,0,0" Height="15" Width="15" Visibility="{Binding StaticInd, Converter={StaticResource BoolVisConv}, ConverterParameter=inverse, Mode=OneWay}"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="{b:CaptionBinding gridHeaderCPAMGA}" Binding="{Binding MgaY1P}" MinWidth="50" Width="*" CellStyle="{StaticResource DGCellMGA}" />
</DataGrid.Columns>
</DataGrid>
Inside your cell's Template, add another Trigger (this time, a DataTrigger) that listens to the IsSelected property of the containing DataGridRow. Inside the DataTrigger, use the TargetName property of the Setter to tell it to modify the Source property of the Image (you have to give it an x:Name first):
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CPAName}" />
<Image x:Name="image" Source="/Images/TimelineIconGreenTransparent.gif" Margin="5,0,0,0" Height="15" Width="15" Visibility="{Binding StaticInd, Converter={StaticResource BoolVisConv}, ConverterParameter=inverse, Mode=OneWay}"/>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}"
Value="True">
<Setter TargetName="image"
Property="Source"
Value="/Images/Whateveryourotherimageisnamed.gif" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Bind content of contrentcontrol to selectedvalue of combobox

I would like to bind content of contrentcontrol to selectedvalue of combobox and set visibility according to trigger. But it is not work. What is the problem ?
<DockPanel>
<ComboBox x:Name="combobo" Padding="4" Width="120" HorizontalAlignment="Left" Margin="30,10,0,0" VerticalAlignment="Center">
<ComboBoxItem>0</ComboBoxItem>
<ComboBoxItem>1</ComboBoxItem>
</ComboBox>
<ContentControl x:Name="contentcontrol" Grid.Row="0" Grid.Column="2" Content="{Binding ElementName=combobo, Path=SelectedIndex}" Margin="0,10,0,0" VerticalAlignment="Center"
Visibility="Visible">
<ContentControl.ContentTemplate>
<DataTemplate>
<DockPanel x:Name="WarningGrid" VerticalAlignment="Top" Visibility="Collapsed">
<TextBlock Text="Warning" VerticalAlignment="Center"></TextBlock>
</DockPanel>
<DataTemplate.Triggers>
<Trigger Property="ContentControl.Content" Value="0">
<Setter TargetName="WarningGrid" Property="Visibility" Value="Visible" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</DockPanel>
I also tried it with SelectedIndex but also trigger is not working.
Thanks.
Change the Trigger to DataTrigger
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Content, RelativeSource={RelativeSource AncestorType={x:Type ContentControl}}}" Value="0">
<Setter TargetName="WarningGrid" Property="Visibility" Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>

Change Opaticy of Tab Item In an Items Control

I have a data bound tab control:
<TabControl ItemsSource="{Binding Products}" Name="ProductsTabControl">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
This control is showing one tab per product, however I would like to make the tabs of discontinued products semi-transparent (i.e. set their opacity to 0.2). How can I change the opacity property of the tabitem when the item is being auto generated. I know I could use a style to change them all, but I only want to change those which are discontinued.
In ItemsContainerStyle for TabControl, create a DataTrigger where you bind to your property (e.g IsDiscontinued) and set the Opacity from there
<TabControl ItemsSource="{Binding Products}" Name="ProductsTabControl">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDiscontinued}" Value="True">
<Setter Property="Opacity" Value="0.2"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.ItemContainerStyle>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Update
If you want to make the Content of the discontinued tabs semi-transparent you can do the same thing, but in the DataTemplate
<TabControl ItemsSource="{Binding Products}" Name="ProductsTabControl">
<TabControl.Resources>
<DataTemplate DataType="{x:Type local:Product}">
<Border Name="bg" BorderBrush="Black" BorderThickness="1">
<TextBlock Text="{Binding Name}"/>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsDiscontinued}" Value="True">
<Setter TargetName="bg" Property="Opacity" Value="0.2"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.Resources>
<!--...-->
</TabControl>

Resources