I have a comboBox with a ComboBox.ItemTemplate
<ComboBox>
<ComboxBox.ItemTemplate>
<DataTemplate DataType="{x:Type ViewModel}">
<TextBlock Text="1" />
</DataTemplate>
</ComboxBox.ItemTemplate>
</ComboBox>
The Item renders properly, but when I try to select the ComboxItem, the selection is only available on "1" rest of the Area in the ComboBoxItem is not clickable.
How do I set up the code so the selection can happen on the whole item and not just the Textblock.
Your ComboBox/ComboBoxItem seems to be templated, by default the highlight brush is a deeper blue. If you have access to the templates make sure the content of the ComboBoxItem stretches horizontally.
If the template is bound "correctly" setting the content-alignments may be enough.
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ComboBox.ItemContainerStyle>
Related
In WPF Listbox, I'm confused with these 2 notions:
ItemTemplate and ItemContainerStyle
Can someone explain me more?
The ItemTemplate is for styling how the content of your data item appears. You use it to bind data fields, format display strings, and so forth. It determines how the data is presented.
The ItemContainerStyle is for styling the container of the data item. In a list box, this would be a ListBoxItem. Styling here affects things like selection behavior or background color. It determines style and UX of the display.
The MSDN page for ItemContainerStyle, linked above, has a pretty good example showing some differences:
<!--Use the ItemTemplate to set a DataTemplate to define
the visualization of the data objects. This DataTemplate
specifies that each data object appears with the Proriity
and TaskName on top of a silver ellipse.-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="18"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
</DataTemplate.Resources>
<Grid>
<Ellipse Fill="Silver"/>
<StackPanel>
<TextBlock Margin="3,3,3,0"
Text="{Binding Path=Priority}"/>
<TextBlock Margin="3,0,3,7"
Text="{Binding Path=TaskName}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<!--Use the ItemContainerStyle property to specify the appearance
of the element that contains the data. This ItemContainerStyle
gives each item container a margin and a width. There is also
a trigger that sets a tooltip that shows the description of
the data object when the mouse hovers over the item container.-->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Control.Width" Value="100"/>
<Setter Property="Control.Margin" Value="5"/>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=Content.Description}"/>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
The ItemContainerStyle just a wrapper for the DataTemplate so that a common item style can be applied to different data layouts.
Also, from this answer to "DataTemplate vs ItemContainerStyle":
You can do all your styling in the ItemTemplate but the ItemContentStyle has VisualStates which control the Opacity on mouse over/disabled/selected etc.
If you want to change those opacity state changes, or if you want any Container shape other than a rectangle, like a triangle for example, then you'll have to override the default ItemContainerStyle.
I have a WPF application with ListBox that display list of items.
Each item has IsChecked property.
I have change the style of the ItemContainerStyle of the list box as follos:
<Style x:Key="OrgListItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ToggleButton IsChecked="{Binding IsChecked}">
<ContentPresenter />
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that the focus, when navigating with the keyboard, is on the ListBoxItem and not the ToggleButton itself which makes it not intuitive to work with.
How ca I change the focus so it will be right on the button and not the ListBoxItem - preferable not with code.
Thank you,
Ido
You could set Focusable to false for the ListBoxItems in your Style:
<Setter Property="Focusable" Value="False"/>
Note that ListBox has some magic to remember the element that had keyboard focus that won't work if you don't allow the ListBoxItem to be selected.
If you don't want to use the features of the ListBox at all, then you may be better off using a plain ItemsControl rather than a ListBox. You would need to use a DataTemplate rather than a ControlTemplate since there is no container control:
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton IsChecked="{Binding IsChecked}" Content="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have a custom ItemsControl (WorKArea) that marks all items it has into a WorkSheet instance.
I have a style for the ItemsControl that uses a TabControl to show the content. Every sheet creates a tab. The style is:
<Style TargetType="{x:Type local:WorkArea}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:WorkArea}">
<TabControl ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:WorkArea}}, Path=Items}">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Title}" />
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So far so good. The "sheets" show up, and the title is properly bound to the Header.
How can I get the tabs showing the content now? Whatever I try, nothing shows up at all for every WorkSheet - the content is always empty. Anyone the proper code?
Your work area should provide a ContentTemplate property and the TabControl should have a TemplateBinding which to it.
How do you remove the focus rectangle from a silverlight ListBox? I have this code:
<ListBox x:Name="MyListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
...snipped...
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
and when i run it i get the exception
System.Windows.Markup.XamlParseException: Invalid attribute value FocusVisualStyle for property Property. [Line: 47 Position: 38]
what am i doing wrong? Many thanks :)
In Silverlight the ListBoxItem type doesn't have a FocusVisualStyle property hence the error.
In order to acheive your goal you need to supply a new template for the ListBoxItem. Form the Silverlight documentation you'll find the default template in ListBox Styles and Templates.
Copy the ListBoxItem template into a Static resource (the App.Xaml would be a good place)
<ControlTemplate TargetType="ListBoxItem" x:Key="ListBoxItemSansFocus">
<!-- copy of the rest of the control template here -->
</ControlTemplate>
Now remove the StoryBoard from the "Focused" VisualState and remove the final rectangle that has the name "FocusVisualElement".
Now in make your ContainerStyle property look like:-
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template" Value="{StaticResource ListBoxItemSansFocus}" />
</Style>
</ListBox.ItemContainerStyle>
I'm using the WPFToolkit DataGrid control and I wanted to restyle some of the column headers so that the header text is displayed vertically instead of horizontally (the data in the column is all numeric and therefore, not very wide, but the header text is long).
So I created a DataTemplate to and tried to get the DataGridColumn.HeaderTemplate to it. This is my template:
<DataTemplate x:Key="headerTemplate">
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="Aqua">
<StackPanel.LayoutTransform>
<RotateTransform Angle="-90"/>
</StackPanel.LayoutTransform>
<TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="Pink">
</TextBlock>
</StackPanel>
</DataTemplate>
This works just fine, except the alignment of the header is always left and center. No combination of alignments for the StackPanel or the TextBlock seems to make any difference. I would like to have the text aligned at the bottom and middle. How can I make it do that?
Thanks,
AT
OK, found the answer.
The property I was looking for was VerticalContentAlignment.
I created a style and attached that using the HeaderStyle property, and it worked :)
<Style x:Key="VerticalGridHeaderStyle" TargetType="tk:DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
If you don't want to mess up the style that you have already applied, use BasedOn:
<DataGrid.ColumnHeaderStyle>
<Style BasedOn="{StaticResource MetroDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGrid.ColumnHeaderStyle>
This also works
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
Add the x:Key="" if you don't want to target all DataGridColumnHeader's