My ListView is not behaving as I want and I can't seem to find anything useful on this topic.
So the problem is, that I have a ListView which uses a DataTemplateSelector based on Datatype.
So this all works fine and shows the correct control, but the problem is, that the items do not stretch horizontally!
All solutions regardings ListViewItems not stretching suggest to use
<Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
and to set
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
in the ListView.
This does work fine when no DataTemplateSelector is used, but in combination with that DataTemplateSelector it doesn't and the controls in the list do not get their parents size.
The DataTemplateSelector is by the book and works fine, so it is omitted here.
I tried all kind of combinations of Width="Auto", HorizontalAlignment and HorizontalContentAlignment, but I could not make it work. I could imagine that it might help to pass the Width or HorizontalContentAlignment in this DataTemplateSelector, but I couldn't find a way to do this.
Here is the minimal XAML:
<UserControl.Resources>
<Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
<DataTemplate x:Key="DrawDataTemplate" DataType="viewModels:DrawSectionViewModel">
<infrastructure:DrawSectionItem />
</DataTemplate>
<DataTemplate x:Key="FeedDataTemplate" DataType="viewModels:FeedSectionViewModel">
<infrastructure:FeedSectionItem />
</DataTemplate>
<infrastructure:SectionTemplateSelector x:Key="SectionTemplateSelector"
FeedSection="{StaticResource FeedDataTemplate}"
DrawSection="{StaticResource DrawDataTemplate}">
</infrastructure:SectionTemplateSelector>
</UserControl.Resources>
<ListView Grid.Column="0" Width="Auto" Margin="0,0,0,0"
ItemsSource="{Binding LeftSections }"
ItemTemplateSelector="{StaticResource SectionTemplateSelector}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource ListViewItemContainerStyle}" />
Any help would be greatly appreciated
Thanks
Added the item controls. The Draw section is pretty much the same structure.
<UserControl x:Class="Infrastructure.FeedSectionItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="45" Width="188" FontFamily="Segoe UI Light" Background="Black"
>
<Grid Margin="0" >
<StackPanel Orientation="Vertical" Margin="10,0,0,0" HorizontalAlignment="Left" Width="Auto">
<TextBlock Text="Feed" Foreground="White" FontWeight="Bold" FontSize="16" />
<TextBlock Text="" Foreground="White" FontWeight="Bold" />
</StackPanel>
</Grid>
</UserControl>
Remove Width="188" from your UserControl.
In the designer you can set d:DesignWidth="188"
Related
I am obviously missing something very basic here. I have found similar questions but from none of the answers I was able to comprehend what I am doing wrong.
When I set ControlTemplate, my DataTemplate is not picked up.
I have created a very simple example of my problem:
<Window x:Class="WpfTesterProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfTesterProject"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Person}">
<StackPanel>
<TextBlock Text="{Binding FirstName}" />
<TextBlock Text="{Binding LastName}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<ContentControl Content="{Binding Content}">
<ContentControl.Template>
<ControlTemplate>
<Border BorderBrush="Blue" BorderThickness="2">
<ContentPresenter />
</Border>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
</Window>
What I want to do is select user-defined data template loaded at runtime, but also I want to, for example, wrap every single element in border, no matter what the user template is or even if he did not specify any templates at all.
From what I have read from similar questions, I have to use <ContentPresenter /> in the ControlTemplate, but the result is the same as if I remove it - only border is shown.
I reproduced your application. It seems the problem is in the TargetType property of the ControlTemplate:
<ContentControl Content="{Binding}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<Border BorderBrush="Blue" BorderThickness="2">
<ContentPresenter />
</Border>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
I need to create a custom control containing a combobox whose popup will have the Name propeprty of the bound objects aligned to the left, and the CreatedDate property of the bound objects aligned to the right in each pop up item. Also the Name and the CreatedDate must not overlap. The Name of the object is of variable length
I tried solving this problem using a DataTemplate in the Combobox.ItemTemplate, inside the data template I have a grid with two columns aligned appropriately. The Grid's horizontal alignment is set to Stretch but for some reason the Grid doesn't fill out the available space in the popup. Does anyone know how to get around this and why it happens? I am using WPF 3.5.
<UserControl.Resources>
<CollectionViewSource x:Key="cvsProcessingSessionList" Source="{Binding ProcessingSessionList, ElementName=View}"/>
<Style TargetType="{x:Type ComboBox}"
BasedOn="{StaticResource {x:Static res:ObjectResources.LEComboBoxStyle}}">
<Setter Property="Margin" Value="5,3"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</UserControl.Resources>
<GroupBox x:Name="grbProcessingSession">
<GroupBox.Header>
<Bold>Processing Session:</Bold>
</GroupBox.Header>
<GroupBox.Content>
<ComboBox
x:Name="ccbProcessingSessionName"
ItemsSource="{Binding Source={StaticResource cvsProcessingSessionList}}"
Loaded="OnLoaded" TextSearch.TextPath="Name"
IsEditable="True" MaxDropDownHeight="500" >
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid Background="Pink" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextAlignment="Left" HorizontalAlignment="Left"
Margin="0,0,5,0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" TextAlignment="Right" HorizontalAlignment="Right"
Text="{Binding CreatedDate, StringFormat=dd/MM/yyyy}"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</GroupBox.Content>
</GroupBox>
Just add this binding to your grid in yiour DataTemplate ...
Width="{Binding ActualWidth,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ComboBoxItem}},
Mode=OneTime}"
Also for better effect, apply the background color to the ComboBoxItem and not to the grid...
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Background" Value="Pink"/>
</Style>
</ComboBox.ItemContainerStyle>
Whenever I want to do the same that you are asking I add:
<ComboBox ...>
<ComboBoxItem HorizontalContentAlignment="Stretch">
</ComboBoxItem>
</ComboBox>
The thing is that I place my custom DataTemplate inside the ComboBoxItem.
Maybe you should try it...
Actually, the better way is to set HorizontalContentAlignment="Stretch" at the ComboBox level. This will work even if width of ComboBox changes (e.g. if it is in resizable container).
However, be aware that this works in WPF and Silverlight 5 but don't work in some older versions of Silverlight.
I have a WPF listbox with custom items. Each item is a user control consisting of a grid with two textboxes. I want that the right one takes all the space to fill the ListBoxItem. But all I get working is that the item itself takes the whole space but the textbox takes the size of its content.
So this is the listbox:
<ListBox x:Name="leftListBox" Grid.Column="0" Margin="10"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<local:CustomLine />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And the user control:
<UserControl x:Class="SharpComparer.CustomLine"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="30">
<UserControl.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox x:Name="NumberColumn" x:FieldModifier="public"
Text="{Binding LineNumber}"
Grid.Column="0" HorizontalAlignment="Right" />
<TextBox x:Name="TextColumn" x:FieldModifier="public"
Text="{Binding Text}"
Grid.Column="1" HorizontalAlignment="Left" />
</Grid>
</UserControl>
What I have already tried after some research at some MSDN posts and around here on Stack Overflow: Setting the HorizontalContentAlignment to Stretch for Listbox.ItemContainerStyle. I used some borders to find the piece which makes problems. The ListBoxItems seem to take the whole width, the usercontrol and its grid, too. The textbox does not take all the space although I thought that Width="*" inside the grid's ColumnDefinition would do that.
Another idea was to bind the textbox width to its parent size, but then it also takes the space of the left textbox (which makes sense, because it gets the whole width) and subtracting this width doesn't seem to work.
What am I doing wrong?
You have to change your UserControl code from this:
<TextBox x:Name="TextColumn" x:FieldModifier="public"
Text="{Binding Text}"
Grid.Column="1" HorizontalAlignment="Left" />
to this:
<TextBox x:Name="TextColumn" x:FieldModifier="public"
Text="{Binding Text}"
Grid.Column="1" HorizontalAlignment="Stretch" />
I have the following xaml:
<ListBox ItemsSource="{Binding Path=ItemProperties.GeneralProperties}" Grid.Row="1"
Margin="0" Style="{StaticResource ListBoxStyle1}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180" />
<ColumnDefinition Width="320" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<ContentPresenter Content="{Binding Converter={StaticResource PropertyInput}}" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
where the ContentPresenter contains a TextBox, or a ComboBox, or a CheckBox.
To switch between the controls I need twice press the tab. Why???
I've already tried to comment the whole first column, without the TextBlock, unsuccessfully.
This worked for me for a DataGrid (which has a similar templating system).
<UserControl.Resources>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
</Style>
</UserControl.Resources>
Then anything which is a TabStop within the datagrid would work as a tabstop, but nothing else. Sorry I'm not sure what the equivalent code is for ListBox - but you may be able to figure it out from this.
How can I set expander to show some content it encloses even in collapsed state ? I have the following code snippet, can anyone point changes to this code ?
<Window x:Class="UI2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="358" Width="300">
<TabControl>
<TabItem Header="Buga Buga">
<StackPanel>
<Expander ClipToBounds="False">
<ListBox Name="lstProcesses"
MinHeight="60">
</ListBox>
</Expander>
</StackPanel>
</TabItem>
</TabControl>
Thanks
It doesn't sound like Expander is the control you should be using for this scenario. Expander has a header, and content, like this:
<Expander Header="Visible all the time">
<TextBlock Text="Hidden until expanded" />
</Expander>
It sounds to me like you want a control that's set to a specific height some of the time, and unrestrained at other times.
I think you could achieve this by binding a ToggleButton (which Expander uses too, internally) to the MaxHeight property of your ListBox.
Try something like this in Kaxaml:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:diag="clr-namespace:System.Diagnostics;assembly=System">
<Page.Resources>
<!-- A way of getting some test data in Kaxaml -->
<ObjectDataProvider x:Key="Processes"
MethodName="GetProcesses"
ObjectType="{x:Type diag:Process}" />
</Page.Resources>
<StackPanel>
<ToggleButton Name="Expand" Content="Expand" />
<ListBox Name="lstProcesses"
ItemsSource="{Binding Source={StaticResource Processes}}"
DisplayMemberPath="ProcessName">
<ListBox.Style>
<Style TargetType="ListBox">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Expand, Path=IsChecked}"
Value="False">
<Setter Property="MaxHeight" Value="60" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
</StackPanel>
</Page>
Here's a quick example of how to the Collapsed text (the Header) to the selected item in the listbox contained within the expander:
<Expander ClipToBounds="False">
<ListBox Name="lstProcesses"
MinHeight="60">
</ListBox>
<Expander.Header>
<TextBlock Text="{Binding SelectedItem, ElementName=lstProcesses}"/>
</Expander.Header>
</Expander>