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.
Related
I am trying to work on this WPF design and not having any luck
This is the xaml
<UserControl x:Class="namespace.myuserControl"
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"
xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
mc:Ignorable="d"
Loaded="UserControl_Loaded"
Focusable="True"
d:DesignHeight="10000" d:DesignWidth="1049">
<UserControl.Resources>
<CollectionViewSource x:Key="DocumentGroup" Source="{Binding docs}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="type.Name"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<DataTemplate x:Key="groupingHeaderTemplate">
<Label VerticalAlignment="Center" Content="{Binding}" FontWeight="Bold" Background="AliceBlue"></Label>
</DataTemplate>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="50" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
The button is not visible because you set row height to 50 but also button height to 100. I would set row height to Auto in this case.
White space on the right side in the second column is due to you've set main grid HorizontalAlignment to Left. Just remove it.
WebView2 doesn't fill the space because the parent grid has HorizontalAlignment set to Left.
Here is updated xaml (main grid only)
...
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
Application with an Dashboard.
The Dashboard uses Cards in the form of User Controls. These Controls weren't responsive so I put them into Viewboxes. Some Cards are working but some don't. Especially the Cards with DataGrids in them don't work for me. Maybe you can help me out.
DashboardView
Here is the DashboardPage:
<Page x:Class="Keppler.MES.Common.Pages.Dashboard"
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"
xmlns:sysglb="clr-namespace:System.Globalization;assembly=mscorlib"
xmlns:local="clr-namespace:Keppler.MES.Common.Pages"
xmlns:pageviewmodels="clr-namespace:Keppler.ViewModels.PageViewModels;assembly=Keppler.ViewModels" xmlns:controls="clr-namespace:Keppler.MES.Common.Pages.Controls"
mc:Ignorable="d"
Title="DashboardPage">
<Page.DataContext>
<pageviewmodels:VMDashboard/>
</Page.DataContext>
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\Common\ResourceDictionaries\KepplerColorsAndBrushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<controls:KepplerEffortCard PageName="Bookings" GroupedEfforts="{Binding EffortOfLastWorkDay}" EffortOfBindings="{Binding LastWorkDaysEffort}" JumpToLink="{Binding RequestPageChangeCommand}" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2"/>
<controls:KepplerEffortCard PageName="Bookings" GroupedEfforts="{Binding EffortOfLastWeek}" EffortOfBindings="{Binding LastWeeksEffort}" JumpToLink="{Binding RequestPageChangeCommand}" Grid.Column="6" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2"/>
<controls:KepplerOrdersCard PageName="Orders" Grid.ColumnSpan="12" Grid.Row="5" Grid.RowSpan="2" OrderBudgets="{Binding OrderBudgets}" JumpToLink="{Binding RequestPageChangeCommand}"/>
<controls:KepplerTurnOverCard Grid.Row="0" Grid.ColumnSpan="2" Header="{Binding TurnOverThisYear.Header}" TurnOver="{Binding TurnOverThisYear.TurnOver}" Grid.Column="0" Margin="10,0" />
<controls:KepplerTurnOverCard Grid.Row="0" Header="{Binding TurnOverLastYear.Header}" TurnOver="{Binding TurnOverLastYear.TurnOver}" Grid.Column="2" Grid.ColumnSpan="2" Margin="10,0" RenderTransformOrigin="0.5,0.5"/>
<controls:KepplerTurnOverCard Grid.Row="0" Grid.ColumnSpan="2" Header="{Binding TurnOverThisQuarter.Header}" TurnOver="{Binding TurnOverThisQuarter.TurnOver}" Grid.Column="4" Margin="10,0"/>
<controls:KepplerTurnOverCard Header="{Binding TurnOverThisMonth.Header}" TurnOver="{Binding TurnOverThisMonth.TurnOver}" Grid.ColumnSpan="2" Grid.Column="6" Grid.Row="0" Margin="10,0"/>
<Viewbox Grid.Row="1" Grid.Column="0" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding BudgetWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Invoices" WarningsInfo="{Binding InvoiceWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="4" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding ResourceWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="6" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding DeliveryWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="8" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding WorkloadWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="10" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerBankingCard BankingsInfo="{Binding BankingsInfo}"/>
</Viewbox>
<controls:KepplerCustomerCard PageName="Customers" Grid.Row="7" Grid.RowSpan="2" Customers="{Binding Customers}" Grid.ColumnSpan="12" JumpToLink="{Binding RequestPageChangeCommand}"/>
<controls:KepplerProjectsCard PageName="Projects" Grid.ColumnSpan="12" Grid.Row="9" Grid.RowSpan="2" Projects="{Binding Projects}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Grid>
Here is the Control:
<UserControl x:Class="Keppler.MES.Common.Pages.Controls.KepplerOrdersCard"
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"
xmlns:local="clr-namespace:Keppler.MES.Common.Pages.Controls"
mc:Ignorable="d"
Name="OrderBudgetCard"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\..\Common\ResourceDictionaries\KepplerColorsAndBrushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Border CornerRadius="5" Margin="5" BorderThickness="0">
<Border.BitmapEffect>
<DropShadowBitmapEffect/>
</Border.BitmapEffect>
<Grid>
<Border x:Name="DBRounded" CornerRadius="5" BorderThickness="1" Background="#FF888888"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Border x:Name="Header" Grid.ColumnSpan="1" Grid.RowSpan="1" CornerRadius="5,5,0,0" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFAE00" Offset="0"/>
<GradientStop Color="#FFFFC500" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Button Background="Transparent" Command="{Binding ElementName=OrderBudgetCard, Path=JumpToLink}" CommandParameter="{Binding ElementName=OrderBudgetCard, Path=PageName}" Grid.ColumnSpan="1" Grid.RowSpan="2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"
BorderThickness="1" CornerRadius="5">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FFFFAE00"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<DataGrid x:Name="dgOrderBudgets"
Background="Transparent"
ItemsSource="{Binding ElementName=OrderBudgetCard, Path=OrderBudgets}"
AutoGenerateColumns="False"
HorizontalGridLinesBrush="Transparent"
VerticalGridLinesBrush="Transparent"
BorderBrush="Transparent"
IsReadOnly="True" Grid.RowSpan="2">
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="Background" Value="Transparent"/>
</Style>
</DataGrid.RowHeaderStyle>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="Margin" Value="5"/>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="black"/>
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="darkred"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="order number" Width="200" Binding="{Binding Order.Number}"/>
<DataGridTextColumn Header="budget [€]" Width="120" Binding="{Binding Order.Subtotal,StringFormat=C2, ConverterCulture=de-DE}"/>
<DataGridTextColumn Header="consumed [€]" Width="*" Binding="{Binding EffortInCash,StringFormat=C2, ConverterCulture=de-DE}"/>
<DataGridTextColumn Header="state" Width="*" Binding="{Binding Order.Title}"/>
</DataGrid.Columns>
</DataGrid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=DBRounded}"/>
</Grid.OpacityMask>
</Grid>
</Grid>
</Border>
I tried putting the other Controls into Viewboxes like the Warningcards, but I didnt get anything out of it. Doesnt matter if I used fill, uniform or uniformtofill.
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">
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 custom control template which is set via the style property on a TextBox. The visual poperties are set correctly, even typing to the textbox works, but there is no insertion cursor (the | symbol) visible which makes editing challenging for our users.
How does the control template need changing to get the traditional TextBox behavior back?
<Style x:Key="DemandEditStyle" TargetType="TextBox">
<EventSetter Event="LostFocus" Handler="DemandLostFocus" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="White" Offset="0.15" />
<GradientStop Color="#EEE" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Black" />
<Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="Black" />
<Grid Grid.Row="0" Grid.Column="0" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Black" />
<Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Background="Black" />
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Background="#CCC" />
<Border Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" Background="#CCC" />
<TextBlock Grid.Row="1" Grid.Column="1"
TextAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="3 0 3 0" Background="Yellow"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text}"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=1}, Path=ActualWidth}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update: Replacing the inner-most TextBox with a ScrollViewer and naming it PART_ContentHost indeed shows the text insertion cursor.
I suppose the reason is that your template lacks an element called PART_ContentElement. As stated here, an element with that name is used to display the content of the TextBox. However, in the v3.5 version of this document, the element is called PART_ContentHost and is further restricted to be a ScrollViewer or an AdornerDecorator.
You should base your Style on the old Style of TextBox:
<Style x:Key="DemandEditStyle" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">