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.
Related
How to stretch GridViewItem horizontaly? Trying to set property HorizontalContentAlignment or style property in ItemContainerStyle. This does not help.
Here is a code:
<GridView ItemsSource="{x:Bind Banks}" SelectionMode="None" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:Bank">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<GridView ItemsSource="{x:Bind Departments}" Grid.Row="1" HorizontalContentAlignment="Stretch" IsItemClickEnabled="True" VerticalContentAlignment="Stretch">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:Department">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<TextBlock Text="{Binding Address}" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="{Binding USD.Date}" Grid.Column="1" Grid.RowSpan="2"/>
<TextBlock Text="{Binding USD.Sell}" Grid.Column="2" />
<TextBlock Text="{Binding USD.Buy}" Grid.Column="2" Grid.Row="1"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
By default,GridView uses ItemsWrapGrid as the panel to position and arrange GridViewItem, you can find this from Live Visual Tree:
Although you've set HorizontalContentAlignment or HorizontalAlignment to Stretch for GridViewItem, but the size of GridViewItem is limited by ItemsWrapGrid.
ItemsWrapGrid positions child elements sequentially from left to right or top to bottom in an ItemsControl that shows multiple items. When elements extend beyond the container edge, elements are positioned in the next row or column.
So in ItemsWrapGrid, items won't be stretched.
If you want to stretch GridViewItem horizontaly, we can use ItemsStackPanel instead of ItemsWrapGrid like following:
In Resources, add a ItemsPanelTemplate with ItemsStackPanel:
<Page.Resources>
<ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
<ItemsStackPanel />
</ItemsPanelTemplate>
</Page.Resources>
Then use this template in GridView:
<GridView HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ItemsPanel="{StaticResource MyItemsPanelTemplate}"
ItemsSource="{x:Bind Banks}"
SelectionMode="None">
...
<GridView Grid.Row="1"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsItemClickEnabled="True"
ItemsPanel="{StaticResource MyItemsPanelTemplate}"
ItemsSource="{x:Bind Departments}">
...
</GridView>
...
</GridView>
Or we can use ListView instead of GridView as ListView's default ItemsPanel is ItemsStackPanel.
I want to Change the Height of the ItemContainer and not the Heightof the Item itself the Container is in a ListView
What I want to Change:
To Something like this:
The structur of the Code Looks like this:
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding A}" Grid.Column="0"/>
<TextBlock Text="{Binding B}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hope for some help
You need to change the MinHeight of all ListViewItem elements that appear in your ListView. You can achieve this by using a Style.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="6,3"/>
</Style>
</ListView.ItemContainerStyle>
<TextBlock Text="Hello"/>
<TextBlock Text="World"/>
</ListView>
Using Padding with this method is also a good idea as you do not want each list view item to be too thin.
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>
Does anyone know a simple XAML solution to change the entire background of a ToolTip?
I did the following:
<Image Height="16" Source="Images/Icons/Add2.png" Stretch="Fill" Width="16" Opacity="0.99" Grid.Column="0">
<Image.ToolTip>
<Grid Background="#000000">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Header1" FontSize="15" Grid.Row="0"/>
<TextBlock Text="Subitem" FontSize="12" Grid.Row="1"/>
</Grid>
</Image.ToolTip>
</Image>
But the result looks like that:
Any suggestions?
The problem is that all you're really doing is setting the CONTENT of the tooltip, not the tooltip itself.
So you'll need to style the tooltip to make this happen. There are some ways to do it with resources as seen in this post:
WPF- Changing Tooltip background to Transparent
or you can change your code to wrap that grid with an explicit ToolTip and set its background property:
<Image.ToolTip>
<ToolTip Background="Black">
<Grid>
...
</Grid>
</ToolTip>
</Image.ToolTip>
To set the tooltip background you can override the style of the tooltip for the parent control. Below is your code with added style.
<Image Height="16" Source="Images/Icons/Add2.png" Stretch="Fill" Width="16" Opacity="0.99" Grid.Column="0">
<Image.Resources>
<Style TargetType="ToolTip" BasedOn="{StaticResource {x:Type ToolTip}}">
<Setter Property="Background" Value="#000000" />
</Style>
</Image.Resources>
<Image.ToolTip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Header1" FontSize="15" Grid.Row="0"/>
<TextBlock Text="Subitem" FontSize="12" Grid.Row="1"/>
</Grid>
</Image.ToolTip>
</Image>
To change or Set the Background/Foreground color for the Tooltip in DataGrid in WPF
Create the DataGrid as "Grid1" and add the DataGridTextColumn which contains the ToolTip with item.
To change the Background colour for the ToolTip, add the Setter property in the DataGrid Resources
<DataGrid x:Name="Grid1">
<DataGrid.Resources>
<Style TargetType="ToolTip">
<Setter Property="Background" Value="Black"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Style>
</DataGrid.Resources>
<DataGridTextColumn Header="ActionName" Binding={Binding ActionName}>
<DataGridTextColumn.CellStyle>
<Setter Property="Control.ToolTip">
<Setter.Value>
<UniformGrid Columns="1">
<TextBlock Text="Action List" FontWeight="Bold"/>
<TextBlock Text="Cut"/>
<TextBlock Text="Copy"/>
<TextBlock Text="Delete"/>
</UniformGrid>
</Setter.Value>
</Setter>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
</DataGrid>