I'm creating a ListView with DataTemplate is a only text and a button. I want the button to be right most side and text is to left most side. However I noticed that it seems like my Grid.ColumnDefinitions not take all the space of the ListViewItem (Or I thought so). I want them to expand to full width.
<ListView Padding="5" x:Name="RecipeList" FontSize="15">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1">Delete</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The default content alignment for a ListViewItem (the container of the content which is defined by your data template) is Left, so the Grid will only take as much space as it needs, but does not scale to the available width. Change it to Stretch is an item container style instead.
<ListView Padding="5" x:Name="RecipeList" FontSize="15">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1">Delete</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Your columns are defined that the TextBlock and the Button take equal proportions in the grid. If you want to align the Button to the right and the TextBlock to take the remaining space, set the Width of the second column to Auto. Then the Button only uses as much space as it needs.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1">Delete</Button>
</Grid>
Related
I have the following DataTemplate where inside is a Grid with a 'TextBlock' and TextBox that I want to align to the center:
<DataTemplate x:Key="OneSettingsEntryTemplate" DataType="{x:Type templateHelper:InputText}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardTextBlocksStyle}"
Text="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<TextBox Grid.Column="1"
Style="{StaticResource DefaultTextBoxesStyle}"
Text="{Binding Content, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</DataTemplate>
In one of my UserControls I have the following code where I use the Template:
<StackPanel DataContext="{Binding ElementName=ControlForProjectSettings, Path=ViewModel}"
HorizontalAlignment="Center">
<TextBlock Style="{StaticResource HeadingTextBlocksStyle}"
Text="Project settings"/>
<ListView Background="#DAE7F5"
ItemsSource="{Binding ProjectSettingEntries}"
ItemTemplate="{StaticResource OneSettingsEntryTemplate}">
</ListView>
</StackPanel>
When I run my application and display some items, the last item has a longer text and therefore the TextBox flips to the right. Application Image
I tried playing around with the HorizontalAlignment and VerticalAlignment properties inside the Grid or also using a DockPanel instead of a Grid but couldn't find a solution. Any ideas?
Thanks to this source: WPF share column width between separate grids I solved my problem.
I added the IsSharedSizeScope to my Grid and the SharedSizeGroup property to my columns.
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
</Grid.ColumnDefinitions>
Each list item must be
TextBlock 1 fill first row with 100% width;
TextBlock 2,3,4 must fill 33% each on separate row;
Why TextBlock 2,3,4 not strech?
<ListView.ItemTemplate><DataTemplate><StackPanel>
<TextBlock Text="{Binding Name}" />
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="Right" Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Text="{Binding Rest}" FontSize="28"/>
<TextBlock TextAlignment="Right" Grid.Row="0" Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Text="{Binding Currency.Name}" FontSize="25"/>
<TextBlock TextAlignment="Right" Grid.Row="0" Grid.Column="2"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Text="{Binding FullRest}" FontSize="22"/>
</Grid>
</StackPanel></DataTemplate></ListView.ItemTemplate>
P.S.
How i can add 1...x rows in list view in design time?
Use ListView.ItemContainerStyle
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This code (with normal values, because I don't have the underlying data structure) works fine for me.
Different rows can have different widths however. That can be fixed by setting the Width of the StackPanel to the ActualWidth - margins of the listview.
You can find some info about how to add mock data, for usage in the designer, here: How to get mock data into listview during design time and real data at run time in WPF
I used a ListBox to bind my data in similar way.
You will need to give stackpanel specific width
And you will have to set textwrapping property to 'no wrap'
<ListBox x:Name="listbox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Width="480">
<TextBlock Text="{Binding main}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap" Text="{Binding one}"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding two}" Grid.Column="1"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding thr}" Grid.Column="2"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This Works perfectly for me!
I'd like to have grid width same as listview width, right now it looks like:
But what i want to reach is:
Code:
<DataTemplate x:Key="Shared">
<ListView Name="_lv" ItemsSource="{Binding lista}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding name}"/>
<Grid Grid.Column="1">
<WrapPanel Orientation="Horizontal">
<telerik:RadNumericUpDown Name="minRNUD" Value="0" />
<Button Width="40" Height="40" Style="{StaticResource MButton}" Margin="0" Padding="1">
<Button.Content>
<Image Source="/myProject;component/Pictures/clr.png" Width="30" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button.Content>
</Button>
</WrapPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
Any ideas?
Thanks!
HorizontalContentAlignment property determines the horizontal alignment of the content
setting HorizontalContentAlignment on the list items may affect it's content not the item itself
however setting the same on the parent items control like ListBox, ListView etc. will affect the alignment of their content or can say the items
so simply moving the HorizontalContentAlignment property to the parent ItemsControl (ListBox, ListView etc). will ensure the desired alignment of the items.
so simply add the property HorizontalContentAlignment="Stretch" to the parent items control of the desired item.
How do I control the amount of space between items coming from the Biding 'Shorthand'? At the moment I have gaps between which seem to be dependent on the size of the value of 'Shorthand' itself (so if the value is 1 character the gap between it and the next value is bigger compared to if the value is 2 characters long).
I have tried putting the margin and padding to zero in various places to no avail.
<ListView ItemsSource="{Binding Rounds}" IsItemClickEnabled="False" ItemClick="ItemView_ItemClick" ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel>
<TextBlock Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}">
<Run Text="Round "/>
<Run Text="{Binding RoundNumber}" />
</TextBlock>
<ListView ItemsSource="{Binding Formations}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Shorthand}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I'm not sure where in the Template the margin/padding is set. As a workaround you may try to set a negative Margin to your ItemContainerStyle:
<ListView Name="myList">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0,0,0,-20" />
</Style>
</ListView.ItemContainerStyle>
// rest of the code
The first occurrence of ItemView of ListView is defined inline. So when ItemSource is set, the ItemTemplate is applied to EVERY item.
ListView.ItemTemplate encompassing Binding Shorthand. Place it in a Grid and define Grid.ColumnDefinitions to Width="Auto" or "*" for DataTemplate.
The StackPanel may help position it better. You will have to adjust Grid defs to your display requirements needed.
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Shorthand}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</StackPanel>
</Grid>
</DataTemplate>
I'd like to wrap text contained in three TextBlocks inside a StackPanel without writing TextWrapping="Wrap" for each TextBlock (sometimes there may be more of those):
<ListBox ItemsSource="{Binding Places}" SelectedItem="{Binding SelectedPlace, Mode=TwoWay}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name, Mode=OneWay}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Path=Distance, Mode=OneWay}" TextWrapping="Wrap" />
<TextBlock Text="{Binding Path=Description, Mode=OneWay}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So if I dynamically add another TextBlock it should wrap automatically (I don't want to do it inside my code-behind file)
In other words - I'd like to write style that would be automatically applied. In CSS it would be something like that:
listbox textblock {
word-wrap:break-word;
}
UPDATE
This contains my ListBox:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.Column="0" Margin="12,0,12,0">
<views:ListItem Margin="12,6,0,0" />
</Grid>
</Grid>
Did you try adding a style for TextBlock? I.e.
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</StackPanel.Resources>
...
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Unless you specify a Width constraint for the TextBlock, it will not wrap its text content. As the StackPanel does not resize its contents, it will never pass any Width constraints to the TextBlocks inside and so they will never wrap. Setting the TextWrapping property to Wrap is not enough to make the text content wrap, so applying a Style with this property set will not do what you want.