Tabbing focus not working with control template that wraps control - wpf

I've tried all kinds of template binding and such to get this to work, but if I use this style on a control, the internal textbox control doesn't show focus.
I'm doing this because I want to set an error template that wraps around the textbox and the spot reserved for displaying units.
Now, typing in the box correct updates the text inside. And clicking on it will show the highlighted border and input caret, but tabbing into it won't.
<Style x:Key="Special" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<DockPanel
LastChildFill="True"
Visibility="Visible">
<Border
Name="PART_UnitContainer"
DockPanel.Dock="Right"
Visibility="Collapsed">
<Label
Content="ft"
Style="{DynamicResource UnitLabel}"
/>
</Border>
<TextBox Name="PART_Control" Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}"/>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="PART_UnitContainer" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Initially I set the whole control as no tab stop, and internal one with tabstop, but apparently you also have to set the tab navigation to continue. I didn't when I tried playing with navigation, so I overlooked this setting.
<Style x:Key="Special" TargetType="{x:Type TextBox}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<ControlTemplate>
...
<Text IsTabStop="True" Name="PART_Control" ...
...
</ControlTemplate>
</Setter>
</Style>
However, this little trick doesn't work for shift-tab out of an editable combobox. I'll update the answer if I figure it out.
For comboboxes you have to do it differently. You don't set TabNavigation to Continue, and you don't set IsTabStop on internal combobox to true.
See
<Style x:Key="Special" TargetType="{x:Type ComboBox}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<ControlTemplate>
...
<ComboBox Name="PART_Control" ...
...
</ControlTemplate>
</Setter>
</Style>

Related

Margin in WPF Datagrid cell not clickable

I created a custom style for WPF DataGrid.
One thing was to add a margin on every cell.
Works fine, but you cannot select a row when you click on the margin. I have no idea how to Workaround this.
<DataGrid ItemsSource="{Binding Items}">
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<!-- Here is the margin for every cell -->
<ContentPresenter Margin="20"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.CellStyle>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="BorderThickness" Value="0 1 0 1"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Style.Triggers>
<!-- mouseover works fine, even for the margin -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Orange"/>
</Trigger>
<!-- this gets not set when you click on the margin in the cell, so you think when the row highlightes you also can select it, but you cant -->
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
</DataGrid>
Margin="20" creates empty area around cell content, which is not clickable because is not filled with anything. The simplest fix is to add Border with transparent background (see related QA {x:Null} vs. Transparent brush)
<ControlTemplate TargetType="{x:Type DataGridCell}">
<!-- Here ist the margin for every cell -->
<Border Background="Transparent">
<ContentPresenter Margin="20"/>
</Border>
</ControlTemplate>

WPF - Using Control Template just on one element

My first steps in WPF and C# and i don't get it to work... :(
I have an application with two grids inside one window. I have to change the style of the first grid, so i started reading and reached using ControlTemplate.
My Grid now looks as i wanted it. But i only want that the first grid looks this way. the second one on the same page should have another style.
Is it possible to bind the controltemplate only on one grid. Maybe by name or soemthing identifying?
My ControlTemplate Code for now i have written in window.resources looks:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,0,0"
Background="Black"
BorderBrush="Black"
BorderThickness="0,2,0,0"
CornerRadius="0,0,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="0,0,0,20"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF454E54" />
<Setter TargetName="Border" Property="Background" Value="#FF0A3651" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="White" />
<Setter TargetName="Border" Property="Background" Value="#FF454E54" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You could give the Style or ControlTemplate an x:Key ( <Style x:Key="key" TargetType="{x:Type TabItem}"> ) and apply it to the element you want by setting the element's Style or Template property like this:
<TabItem Style="{StaticResource key}">
A Style without an x:Key is implicit and will be applied to all elements whose type matches the specified TargetType of the Style.
Instead of writing your template under Window.Resources do it under your Grid.Resources
Try this. All this is doing is setting the style of the TabItem directly.
<TabItem> <!-- This is your TabItem control -->
<TabItem.Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!-- ControlTemplate here -->
</Controltemplate
</Setter.Value>
</Setter>
</Style>
</TabItem.Style>
</TabItem>

Style label host image and text

this is a two part question that probbably have a similar answer.
I want to create in a resource dictionary a style for a label that contains first an image and then the text. The text, as a TextBlock has it's own style (had no problems there). Here is what I have
Label Style:
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<TextBlock Style="{StaticResource TextBlockStyle}">
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TextBlockStyle:
<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="25 0 0 2.5"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
Now my problem is when I add a new label to my Control (ex: Window) and specify the text (ex: Create), no text is shown.Something like:
<Label Style="{StaticResource LabelStyle}">Create</Label>
The text Create does not show, however if I put in my LabelStyle->TextBlock->text it shows, but it's no good since I want to change it for different labels. Is there a way to bind my Label text to my (Inside Style) TextBlock.Text???
My other question is the same, but for images, and Image.Source.
Thanks :-)
EDIT:
This is what I have now with H.B. answer implemented
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<Grid>
<StackPanel Orientation="Horizontal">
<Image Source="/Resources/Create.png" />
<TextBlock Style="{StaticResource TextBlockStyle}" Text="{TemplateBinding Content}"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Note that this is in the Resource Dictionary. For the TextBlock it works great. But for the image it's a different story. I want the same as the 'Text="{TemplateBinding Content}' but for the Image.Source and set it's path in my control when I add the label. Probabbly since it's multiple content I'll have to write more code than I'd like, but I'll settle for the easiest, cleanest answer.
H.B. thanks again and as for the hyperlink, this is still in development, it's not going to be in anyway a hyperlink, just some custom menu button with some animation so it's not so boring for the user :P
Your Label.Template no longer links the Content property of the Label (which you set to "Create") to any internal part. To fix this you can for example bind the TextBlock.Text like this:
<ControlTemplate TargetType="Label">
<TextBlock Style="{StaticResource TextBlockStyle}"
Text="{TemplateBinding Content}"/>
</ControlTemplate>
(I just noticed that you make the Label look like a hyperlink, you do realize that there already is a class for that, right?)

Trigger in WPF is not working

I have a ListView, with ListView.View as GridView.
Default, the mouseOver is working, ListViewItem get highlighted when I mouseover, and get selected when I click it. But after I modified the ControlTemplate, I get the template I want, but the highlight and select is gone.
I use trigger, but it's not working.
Here is my code.
<Style x:Key="filesListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="IsSelected" Value="{Binding FileIsSelected}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid Height="40">
<GridViewRowPresenter/>
<Line X1="0.0" Y1="0.0" X2="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListView}}}" Y2="0.0" StrokeThickness="1" StrokeDashArray="2" Stroke="Gray" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In my template, I actually added a line as a separator between 2 rows of ListViewItem.
I just don't get it why the trigger is not working!
The Background property of a Control is only used in the ControlTemplate. You have replaced the template with one that does not use Background, so setting the property has no effect. You can use {TemplateBinding Background} to bind properties to the Background of the Control. Perhaps you want to bind the Background of the Grid to it:
<ControlTemplate TargetType="ListViewItem">
<Grid Height="40" Background="{TemplateBinding Background}">
<GridViewRowPresenter/>

Listview selection color

I'm playing around with wpf and I saw the following article:
WPF ListView Inactive Selection Color
I want to do something similar. I want to put a border around an a listviewitem when it is selected and i want to not change the background color. The reason I want this is I want a color coded listview and I still want to see the color when it's selected, but i want to know it's selected by it having a border around it.
Any ideas?
UPDATE:
I tried the below answer and it got me half way, it does put a border around the listviewitem but it overrides my background color. I can't get the right syntax i tried(Notice the BasedOn):
<Style x:Key="SourceListView" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="{Binding SourceType, Converter={StaticResource SourceGroupConverter}}"/>
</Style>
<Style x:Key="MyListViewItemStyle" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource SourceListView}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border
x:Name="Border"
BorderBrush="Transparent"
BorderThickness="1">
<GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}" Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then tried this:
<Style x:Key="MyListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="{Binding SourceType, Converter={StaticResource SourceGroupConverter}}"/>
<Setter Property="Template">
...//Same as above
</Setter>
</Style>
Both attempts just set the background to white(or transparent I don't know). I know it's just syntax and I'd appreciate another nudge in the right direction :)
Change the ItemContainerStyle on the ListView to a style that doesn't change the background when an item is selected but instead changes the color of a border. Below is an example:
<Style x:Key="MyListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="{Binding SourceType, Converter={StaticResource SourceGroupConverter}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border
x:Name="Border"
BorderBrush="Transparent"
BorderThickness="1"
Background="{TemplateBinding Background}">
<GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}" Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then use the style like this:
<ListView ItemContainerStyle="{StaticResource MyListViewItemStyle}">
...
</ListView>

Resources