Here's the list I'm creating
You can see that there's a border around each list item. For some reason, the border does not stretch horizontally.
Here's the ListBox XAML:
<ListBox Grid.Row="3"
Grid.Column="0"
BorderBrush="SteelBlue"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
MaxWidth="350">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</Style.Resources>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Border HorizontalAlignment="Stretch"
BorderBrush="SteelBlue"
CornerRadius="3"
MinHeight="65"
Margin="3">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Source="/DFT.Falcon6.UI.Desktop;component/Media/Images/fc6logo.png"
Height="50"
Width="50"
Margin="5"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="{Binding UnitIdentifier}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding IPAddress}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I've got the border's HorizontalAlignment set to Stretch.Anyone see what's wrong?
Thanks
What your looking for is HorizontalContentAlignment="Stretch" on the ListBox
<ListBox Grid.Row="3"
Grid.Column="0"
BorderBrush="SteelBlue"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
HorizontalContentAlignment="Stretch"
MaxWidth="350">
Related
I have a Border inside a DataTemplate for a ListBox. When the mouse is over the item, I want to show the Border. Here's my XAML:
<ListBox Grid.Row="3"
Grid.Column="0"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
MaxWidth="350">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</Style.Resources>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="SteelBlue"
BorderThickness="0"
HorizontalAlignment="Stretch"
CornerRadius="3"
MinHeight="65"
Margin="3">
<Border.Style>
<Style>
<Style.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Border.BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Source="/DFT.Falcon6.UI.Desktop;component/Media/Images/fc6logo.png"
Height="50"
Width="50"
Margin="5"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="{Binding UnitIdentifier}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding IPAddress}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can see that I have a trigger defined in the Border control to set the BorderThickness to 1. However when I run it and mouse over the item, nothing happens.
What am I doing wrong here?
Thanks
Try this:
<Style>
<Setter Property="BorderThickness" Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
The style is applied to the Border control, so there is no need to specify "Border" again on the bindings. I've found that it sometimes (always?) seems that an attribute defined directly on the control will override the change from a trigger. You will also have to remove the borderTickness attribute from the Border control as well.
Also, keep an eye on the Output Window while running. Binding errors will happen silently in the application, but generally show up as red text in the output window that can sometimes help track down errors.
Why does this code throw the "VisualTree set more than once" error on the textblock with the run for Employee number, name, and truck number? It is in within the data template. I tried wrapping that portion in a grid and it didn't work.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<ListView Grid.ColumnSpan="2" Grid.Row="0" BorderBrush="Transparent" Background="Transparent" Name="lvDriverQueueWork" ItemsSource="{Binding ICollectionQueueList, UpdateSourceTrigger=PropertyChanged}" Margin="10,0,10,0" Foreground="Black" AllowDrop="True">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="14" FontWeight="SemiBold" Background="Transparent">
<Run Text="{Binding Path=Items[0].EmployeeNumber}"/>
<Run Text="-"/>
<Run Text="{Binding Name, Mode=OneWay}"/>
<Run Text="-"/>
<Run Text="{Binding Path=Items[0].TruckNumber}"/>
</TextBlock>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#F7F6E4"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="black"/>
</Style.Resources>
<Setter Property="Margin" Value="0,0,0,-1"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<ItemContainerTemplate>
<Border BorderThickness="0,1,0,1" Padding="0,2,0,2" BorderBrush="#DCE1E5" Width="250">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Padding="18,0,0,0" Text="{Binding Trailer, UpdateSourceTrigger=PropertyChanged}"/>
<TextBlock Grid.Column="1" Text="{Binding Carrier, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</Border>
</ItemContainerTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I have some ListViews who each can contain max 5 ListViewItems. As long as there are less than 5 items there should be an Button be displayed. I have already written an Value Converter that returns true if the Count is less than five. But now I have Problems styling my ListView. Because i.e. if there are three ListViewItems they should be styled with the normal style and the "4" item should be an Button. My tought was that I add a new ListViewItem inside the DataTrigger. Is that possible or is there a better way to achive that?
Style.xaml
<Style TargetType="{x:Type ListView}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Rows="5" Columns="1"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Items.Count, Converter={StaticResource ItemCounterConverter}}" Value="true">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<!--ListViewItem-->
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI" TextElement.FontSize="12">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Padding="3,0,0,0" Text="{Binding Betreff}" TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="0"/>
<Button FontSize="7" Content="X" Grid.Column="1" Grid.Row="0"/>
</Grid>
<TextBlock Padding="3,0,0,0" Text="{Binding Kunde}"/>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Ort}"/>
<TextBlock Padding="3,0,0,0" Text="("/>
<TextBlock Text="{Binding Alternative}"/>
<TextBlock Text=")"/>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update
Thanks this looks very promising and you understood it right. But I have problems implementing it. Every ListView has a differnt ItemSource(they're all ObservableCollections), so I don't know if I can set the ItemSource inside the Style? But the Button at the End should be available to all of them. My Styles are in a different File than the ListViews themselves. The definition for my ListViews looks like this:
AppointmentOverview.xaml
<ListView Grid.Column="1" Grid.Row="3" ItemsSource="{Binding Mov}"/>
<ListView Grid.Column="1" Grid.Row="4" ItemsSource="{Binding Mon}"/>
<ListView Grid.Column="2" Grid.Row="3" ItemsSource="{Binding Div}"/>
<ListView Grid.Column="2" Grid.Row="4" ItemsSource="{Binding Div}"/>
<ListView Grid.Column="3" Grid.Row="3" ItemsSource="{Binding Miv}"/>
<ListView Grid.Column="3" Grid.Row="4" ItemsSource="{Binding Min}"/>
<ListView Grid.Column="4" Grid.Row="3" ItemsSource="{Binding Dov}"/>
<ListView Grid.Column="4" Grid.Row="4" ItemsSource="{Binding Don}"/>
<ListView Grid.Column="5" Grid.Row="3" ItemsSource="{Binding Frv}"/>
<ListView Grid.Column="5" Grid.Row="4" ItemsSource="{Binding Frn}"/>
Can somebody give me an idea of why the Wrapping is not working inide these Textblocks?
I just don't know why, i changed all my stackpanels to grids to avoid the infinite space issue, but still it doesn't work...
<Border x:Name="SummaryRightSideContainerBorder" Grid.Column="1"
Margin="10,10,10,10" BorderBrush="Black"
BorderThickness="1">
<ContentControl x:Name="SummaryRightSideContainerContentControl" Content="{Binding SelectedItem, ElementName=SummaryTreeView}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type ViewModelsProject:ProjectViewModel}">
<StackPanel>
<TextBlock Text="Displaying Project DataContract stuff..." />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:SequenceViewModel}">
<StackPanel>
<TextBlock Text="Displaying Sequence DataContract stuff..." />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:GroupViewModel}">
<StackPanel>
<DataGrid Margin="10" AutoGenerateColumns="False"
Background="Transparent" BorderThickness="0"
CanUserAddRows="False"
CellStyle="{DynamicResource dgCellStyle}"
ColumnHeaderStyle="{DynamicResource dgHeader}"
DataContext="{Binding ElementName=SummaryTreeView,
Path=SelectedItem}"
GridLinesVisibility="None"
ItemsSource="{Binding Standards}"
Padding="0" RowHeaderWidth="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<DataGrid.Resources>
<Style x:Key="dgHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<TextBlock Width="{TemplateBinding Width}"
Padding="5"
Text="{TemplateBinding Content}"
TextAlignment="Left">
<TextBlock.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="dgCellStyle" TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Standards">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Path=StepMaster.Description}" VerticalAlignment="Center" FontWeight="SemiBold"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Standard: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Standard}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Details: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Details}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Comments: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Comments}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:StepViewModel}">
<UniformGrid Rows="3">
<TextBlock Margin="10" FontWeight="DemiBold"
Text="Standards" />
<TextBlock Margin="10" FontWeight="DemiBold"
Text="Standards Details" />
<StackPanel Orientation="Vertical">
<DataGrid Margin="10" AutoGenerateColumns="False"
<Another data grid is here />
</DataGrid>
</StackPanel>
</UniformGrid>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Border>
Turns out the only way to make this work is to use properties directly in the DataGrid:
MaxWidth="{Binding ElementName=SummaryRightSideContainerBorder, Path=ActualWidth}" ColumnWidth="*"
MaxWidth is used so that the Datagrid itself does not exceed its container boundaries and ColumnWidth is used so that the columns use 100% of the space available in the datagrid.
Blam's answer put me in the right track to find the solution.
As an answer you need to set second column to
<ColumnDefinition Width="*"/>
so it is constrained. * mean the size of the container. Right now it is growing outside the container (screen)
first column auto is OK
I have a WPF ListBox with a defined DataTemplate. In that template, I have a grid, where the first column width should take up all remaining room in the grid.
This seems to work outside the ListBox, but not inside. Why is that, and how can I get it to behave the same?
Here is my code. See line 36, and line 70
<UserControl x:Class="Russound.Windows.UI.UserControls.MAX.Reports.UniversalReportsWpf"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="250" Width="900" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Height="35" Padding="0,3,5,0" Text="Standard Reports" HorizontalAlignment="Right" FontWeight="Bold" FontSize="20" Foreground="DarkBlue"/>
<Border Grid.Row="1">
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Padding" Value="0,3,5,0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="WhiteSmoke" />
</Style>
</Grid.Resources>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF808080" Offset="0"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300*" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Report Name" FontWeight="Bold"/>
<TextBlock Grid.Column="1" Text="Last Run Date" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Text="Last Ran By" FontWeight="Bold"/>
<TextBlock Grid.Column="3" Text="Secure" FontWeight="Bold"/>
</Grid>
</Border>
</Grid>
<ListBox Grid.Row="1" ItemsSource="{Binding}"
ItemTemplate="{DynamicResource reportLayout}"
VirtualizingStackPanel.VirtualizationMode="Recycling"
MouseDoubleClick="DisplaySelectedReport" Grid.RowSpan="2">
<ListBox.SelectedItem>
<MouseBinding MouseAction="LeftDoubleClick"
Command="ApplicationCommands.Open" />
</ListBox.SelectedItem>
<ListBox.Resources>
<DataTemplate x:Key="reportLayout" DataType="AdHockReport">
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Padding" Value="0,3,5,0"/>
<Setter Property="Cursor" Value="Hand"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" ToolTip="Report Name" Text="{Binding Path=DisplayName}" FontWeight="Bold"/>
<TextBlock Grid.Column="1" ToolTip="Last Run Date" Text="{Binding Path=LastRunDate, StringFormat=MMM dd\, yyyy h:mm tt}" />
<TextBlock Grid.Column="2" ToolTip="Last Run By" Text="{Binding Path=LastRunBy}" />
<TextBlock Grid.Column="3" ToolTip="Secure" Text="{Binding Path=IsSecure}" />
</Grid>
</DataTemplate>
</ListBox.Resources>
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE5E5E5" Offset="0"/>
<GradientStop Color="#FF888888" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
</Grid>
</UserControl>
This is because the ListBoxItem containing the grid is sizing to content. Therefore the "remaining space" for the star-sized column to fill is only as much as the column needs.
To fix this, use the ListBox.ItemContainerStyle to set ListBoxItem.HorizontalContentAlignment to Stretch.
Try editing the ControlTemplate of ListBox and remove the scrollviewer inside that, Let it be just ItemsPresenter inside Border.