I have a WPF listbox and have updated the list item data template to have essentially a 3 column layout.
I would like:
|status color|name| buttons|
These are probably CSS terms but I want to float the status color and name to the left, which I've done, then I would like the buttons to be floated to the right, and always stay to the right even as the window gets wider.
I feel like I'm so close, the list item widths grow when the window gets wider, all I feel I have to do is tell the buttons to float right but can't figure out how. I've tried stack panels, a grid with a auto|*|auto column layout (With a stretch on the last column) and I've tried a dockpanel.
Here's my XAML:
<Controls:MetroWindow x:Class="Appsecute.Views.MainView2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:AppsecuteControls="clr-namespace:Appsecute.Controls"
Title="APPSECUTE" Height="630" Width="480" Icon="/Appsecute;component/Images/icon.png" WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid Margin="0,0,12,0">
<AppsecuteControls:NotifyIcon
x:Name="NotifyIcon"
Text="Appsecute"
Icon="/Images/icon.ico" MouseDoubleClick="NotifyIconMouseDoubleClick" Grid.ColumnSpan="2">
<AppsecuteControls:NotifyIcon.ContextMenu>
<ContextMenu StaysOpen="False">
</ContextMenu>
</AppsecuteControls:NotifyIcon.ContextMenu>
</AppsecuteControls:NotifyIcon>
<Grid Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Margin="12,0,0,24">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="APPLICATIONS" Height="auto" Name="LabelApplications" Grid.Row="0" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
<ListBox Height="auto" Name="ListBoxApplications" Width="auto" Grid.Row="1" Grid.ColumnSpan="3" Focusable="False" Background="White" BorderBrush="{x:Null}" SelectionChanged="ListBoxApplicationsSelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="Background" Value="#EEEEEE"></Setter>
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,2"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#FF4EA6EA"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Fill="{Binding StateColor}" Width="5" Height="auto" Margin="0,0,5,0"></Rectangle>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock Text="{Binding DisplayName}" FontSize="20" Padding="2" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4">
<TextBlock Text="{Binding CloudName}" FontSize="12" Foreground="#FF666666" />
<TextBlock Text=" - " FontSize="12" Foreground="#FF666666" />
<TextBlock Text="{Binding Username}" FontSize="12" Foreground="#FF666666" />
</StackPanel>
</StackPanel>
</StackPanel>
<DockPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonUpload" ToolTip="Upload Application" Click="ButtonUploadClick">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/upload.png"/>
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStart" Click="ButtonStartClick" ToolTip="Start Application" IsEnabled="{Binding IsStopped}">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/play.png" />
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStop" ToolTip="Stop Application" Click="ButtonStopClick" IsEnabled="{Binding IsStarted}">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/stop.png"/>
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Click="ButtonRestartClick" Tag="{Binding}" Name="ButtonRestart" ToolTip="Restart Application">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/restart.png"/>
</StackPanel>
</Button>
</DockPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="SERVICE INSTANCES" Height="auto" Name="LabelServiceInstances" Grid.Row="2" Grid.ColumnSpan="3" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
<ListBox Height="auto" Name="ListBoxServiceInstances" Width="auto" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" />
</Grid>
<Label Height="28" HorizontalAlignment="Left" Margin="0,0,0,0" Name="LabelStatus" VerticalAlignment="Bottom" Width="auto" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Stretch" FontSize="10" />
</Grid>
</Controls:MetroWindow>
And an image of what I'm trying to achieve:
The problem is at the first level below DataTemplate, here:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
By its nature a StackPanel will align items to the left, so it's not a layout that's well suited to what you want to do. Instead try using a Grid with two columns, giving the left column Width=* and the right Width=Auto.
<ListBox HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
...
</StackPanel>
<DockPanel Grid.Column="1" VerticalAlignment="Center">
...
</DockPanel>
</Grid>
<DataTemplate>
</ListBox.ItemTemplate>
<ListBox>
In your ItemContainerStyle, set the HorizontalAlignment to Stretch. I believe it is Left by default, which may be causing the Grid or StackPanel or whatever container you use to collapse.
Related
How can I make the ListView/Layout scroller to behave like modern layout like in android or windows 10. Currently the ListView scrollbar only applies to the ListView itself. I want the scroller to scroll the whole layout including the search bar in XAML.
I want also the ListView Items added to increment to the overall height of the ListView to achieve the effect.
Any available ways to do it with Native wpf xaml (No frameworks/dlls, just pure xaml/c#)
Code:
<local:BasePage x:Class="GeneralMerchandise.UI.Pages.UsersPage"
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:a="clr-namespace:GeneralMerchandise.UI.AttachedProperties"
xmlns:local="clr-namespace:GeneralMerchandise.UI.Pages"
xmlns:c="clr-namespace:GeneralMerchandise.UI.Converter"
xmlns:viewmodel="clr-namespace:GeneralMerchandise.UI.ViewModel"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="UsersPage">
<Page.DataContext>
<viewmodel:UsersViewModel x:Name="VM"/>
</Page.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical"
Grid.Row="0"
Background="{StaticResource DefaultBackground}">
<TextBlock FontSize="{StaticResource FontSizeXLarge}"
Text="Users" />
<Border BorderThickness="0 0 0 1">
<Grid>
<StackPanel Orientation="Vertical" Width="300">
<TextBox Style="{StaticResource FlatTextBox}"
Width="270"
Margin="8"
a:Hint.TextProperty="Search"
a:ClearableText.EnableClearTextProperty="True"
Text="{Binding Search, UpdateSourceTrigger=PropertyChanged}"/>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<StackPanel.Resources>
<Style TargetType="RadioButton" BasedOn="{StaticResource FlatToggle}">
<Setter Property="Padding"
Value="15 10"/>
<Setter Property="BorderThickness"
Value="0 0 0 3"/>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="Filter"
Content="All"
IsChecked="True"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.None }"/>
<RadioButton GroupName="Filter"
Content="Active"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Active }"/>
<RadioButton GroupName="Filter"
Content="Deactived"
Command="{Binding FilterActiveCommand}"
CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Deactivated }"/>
</StackPanel>
</StackPanel>
<Button DockPanel.Dock="Right"
Content="New"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Command="{Binding NewUserCommand}"/>
</Grid>
</Border>
</StackPanel>
<ListView Grid.Row="2"
Background="Transparent"
ItemsSource="{Binding UsersDisplay}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
BorderThickness="0"
Padding="20">
<ListView.Resources>
<c:UserDisplayDataFullnameConverter x:Key="FullnameConverter"/>
<c:BoolToValueConverter TrueValue="Active" FalseValue="Deactivated" x:Key="BoolToStringConverter"/>
</ListView.Resources>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource PlainButton}"
Background="White"
DataContext="{Binding}"
Width="250"
Height="150"
Padding="5"
BorderThickness="2"
Margin="{StaticResource MarginSmall}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<Button.ToolTip>
<ToolTip>
<TextBlock Text="NAME"/>
</ToolTip>
</Button.ToolTip>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0"
Margin="5"
VerticalAlignment="Top"
Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
Fill="{StaticResource LightGrayBrush}"/>
<Ellipse Grid.Column="0"
Margin="5"
VerticalAlignment="Top"
x:Name="userPicturePopup"
Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
Width="Auto">
<Ellipse.Fill>
<ImageBrush ImageSource="{StaticResource UserIconMedium}"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Grid.Column="1"
Orientation="Vertical">
<TextBlock Text="{Binding Converter={StaticResource FullnameConverter}}"
TextWrapping="WrapWithOverflow"
Margin="10 5"/>
<TextBlock Margin="10 5"
Text="{Binding Created, StringFormat=Created {0:d}}"/>
<TextBlock Margin="10 5"
Text="{Binding IsActive, Converter={StaticResource BoolToStringConverter}, StringFormat=Account Is {0}}"/>
</StackPanel>
</Grid>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="Transparent"
BorderThickness="3"
Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
Put your ListView, search bar, and whatever else you want to scroll inside of a ScrollViewer.
I have a DataGrid wrapped in a Grid<-StackPanel and my problem is when I resize the window, DataGrid won't stretch and it's just adding blank space at the end.
I have tried binding and VerticalAlignment="Stretch" but to luck.
<Window x:Name="window" x:Class="ListViewExcel"
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:F"
Width="905.35"
SizeToContent="Height" WindowStartupLocation="CenterScreen" WindowStyle="None"
BorderThickness="0" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" >
<Border x:Name="BorderCustomDialog" Background="Gold" >
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid>
<TextBlock x:Name="TbCaption" VerticalAlignment="Center" Text="TimeLiner"
Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}"
Padding="11" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Image x:Name="Minimize" MouseLeftButtonDown="miniWin" Source="../Resources/minimizebutton.png" Height="25" Width="25" Margin="3,3" />
<Image x:Name="Maximize" MouseLeftButtonDown="maxiWin" Source="../Resources/maximizebutton.png" Height="25" Width="25" Margin="3,3"/>
<Image x:Name="Close" MouseLeftButtonDown="closeWin" Source="../Resources/closebutton.png" Height="25" Width ="25" Margin="0,3,10,3"/>
</StackPanel>
</Grid>
<Grid x:Name="grid" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="50"/>
<RowDefinition Height="Auto" MinHeight="300"/>
<RowDefinition Height="Auto" MinHeight="65"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ImgInstructionIcon"
Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Left" Margin="32,10,0,0" VerticalAlignment="Top"
Source="../Resources/edit2.jpg" Height="42" Width="48" />
<TextBlock x:Name="TbInstructionHeading" Grid.Row="0" Margin="96,14,112,13"
Text="List View to Excel"
HorizontalAlignment="Stretch" VerticalAlignment="Center" TextWrapping="Wrap"
FontSize="18" Foreground="Goldenrod" Padding="7"/>
<Separator Margin="0" Height="5" VerticalAlignment="Bottom"/>
</Grid>
<Grid Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DataGrid x:Name="dataGrid1"
Margin="20,20,20,25" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
CanUserAddRows="False" Height="500">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="RowBackground" Value="Wheat" />
<Setter Property="AlternatingRowBackground" Value="WhiteSmoke" />
</Style>
</DataGrid.Style>
<DataGrid.CellStyle >
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
</DataGrid>
<Separator Margin="0" Height="5" VerticalAlignment="Bottom"/>
</Grid>
<Grid Grid.Row="2" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="#FFECECEC" BorderBrush="#FFC9C9C9" BorderThickness="0,1,0,1" Margin="0,0,0,0" >
<Grid Grid.Row="3" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button x:Name="btnCodetoExcel" Content="List to Excel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="96" Height="25" Margin="38,10,0,0" Click="btnCodetoExcel_Click"/>
<Button x:Name="btnExit" Content="Exit" VerticalAlignment="Top" Margin="0,10,30,0" HorizontalAlignment="Right" Width="75" Height="25" Click="btnExit_Click"/>
</Grid>
</Border>
</Grid>
</Grid>
</StackPanel>
</Border>
</Window>
If you put a control inside a StackPanel it will be take only the space it need to be visualised, so it will not stretch.
For a dynamic view I almost always use a grid with row and column definitions.
I have two TextBoxes, two ListBoxes, a Cancel button and an OK button.
Simplifying the problem, I would like to link the color of the Borderbrush of the second ListBox to the IsEnabled property of the OK button.
An alternative would be link that color change to the ListBoxItem background instead of the Listbox border itself.
Is it possible (maybe through Triggers or something)? If so, could you show me the way?
The XAML of the window is as follows:
<Window x:Class="Opt.ExpertSystem.View.WindowPasteRules"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:scroll="clr-namespace:Opt.ExpertSystem.View"
Title="Paste Rules Options" Width="400" Height="300">
<Window.InputBindings>
<KeyBinding Key="Esc" Command="{Binding CancelCommand}" />
</Window.InputBindings>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="76*" />
</Grid.ColumnDefinitions>
<Label Content="Select Rules to Paste: " Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Margin="0,0,2,0" Width="Auto"/>
<Grid Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.Resources>
<Style TargetType="ScrollViewer">
<Setter Property="scroll:ScrollSynchronizer.ScrollGroup" Value="Group1" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Content="Replace" HorizontalAlignment="Stretch" FontWeight="Bold"/>
<TextBox Margin="55,2,2,2" Text="{Binding CopyNameOrigin}" ToolTip="Non-editable field. Represents the text you want to replace." Focusable="False"/>
<Label Content="With" Grid.Column="2" HorizontalAlignment="Stretch" FontWeight="Bold"/>
<TextBox Grid.Column="2" Margin="42,2,2,2" Text="{Binding CopyNameNew, UpdateSourceTrigger=PropertyChanged}" ToolTip="Represents the results of the changes to be made." />
<ListBox ItemsSource="{Binding Path=CopiedRules}" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" BorderThickness="1" BorderBrush="CornflowerBlue" Grid.IsSharedSizeScope="True" Margin="2,0,2,10" >
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox ItemsSource="{Binding Path=PasteRules}" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2" BorderThickness="1" BorderBrush="CornflowerBlue" Margin="2,0,2,10" >
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked}" Margin="2,5,2,5" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<Grid Grid.Row="2" Background="#FFECE9D8" Grid.ColumnSpan="2">
<Button Content="OK" x:Name="btnOK" IsEnabled="{Binding IsValid, UpdateSourceTrigger=PropertyChanged}" Margin="0,6,6,0" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Width="75" Height="23" Click="btnOK_Click" />
<Button Content="Cancel" x:Name="btnCancel" IsCancel="True" Margin="0,6,90,0" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Width="75" Height="23" />
</Grid>
</Grid>
</Window>
Here's a small example that changes the border brush of a listview based on the IsEnabled property of a button
<StackPanel>
<ListBox Height="100">
<ListBox.Style>
<Style TargetType="ListBox">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=okButton, Path=IsEnabled}" Value="false">
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=okButton, Path=IsEnabled}" Value="true">
<Setter Property="BorderBrush" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
<Button IsEnabled="True" Name="okButton">true</Button>
</StackPanel>
But I would set the availability of the button on the command and not in the XAML, also I would bind the color of the ListView to the IsValid property in the ViewModel instead.
Good morning
I have a Wpf datagrid that is displaying an observable collection of a custom type
I group the data using a collection view source in XAML on two seperate properties, and I have styled the groups to display as expanders.
For clarity, as there is a lot of data I feel I have to use margins and spacing otherwise things look very cluttered.
My problem is that with two levels of hierarchical expanders the column data is now substantially offset from the column headers meaning that they do not properly line up.
I have tried several thing, like setting the margin of the column headers and the width (both actual and normal). However all of my attempts end up resizing the whole column so that the offset stays the same but the columns move.
so my question:
How can I change the visible width or offset of a column header to ensure that the headers line up with the data
Visual Studio 2012
Wpf
C#
DataGrid
EDIT This is what I mean
EDIT 2 - MY Xaml for Grouping
<!-- Style for groups at top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="5,10,5,5"
BorderBrush="{StaticResource BlackBrush}"
BorderThickness="1"
Header="{Binding Name}"
IsExpanded="True">
<Expander.Template>
<!-- The basic expander -->
<ControlTemplate TargetType="{x:Type Expander}">
<!-- Put a border around the expander -->
<Border Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
BorderBrush="{StaticResource GreyBrush}"
BorderThickness="2"
CornerRadius="3">
<!-- Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom -->
<DockPanel Margin="0">
<!-- Add the toggle button -->
<ToggleButton x:Name="ExpanderButton"
Margin="0"
Content="{TemplateBinding Header}"
DockPanel.Dock="Top"
FontSize="14"
FontWeight="Bold"
Foreground="{StaticResource BlackBrush}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpanderContent"
Margin="5"
ContentSource="Content"
DockPanel.Dock="Bottom"
Visibility="{Binding ElementName=ExpanderButton,
Path=IsChecked,
Converter={StaticResource VisibilityConverter}}" />
</DockPanel>
</Border>
</ControlTemplate>
</Expander.Template>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups under the top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="5"
Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
IsExpanded="True"
Visibility="{Binding Items[0].IsSelectedInSidebar,
Converter={StaticResource VisibilityConverter}}">
<Expander.Template>
<!-- The basic expander -->
<ControlTemplate TargetType="{x:Type Expander}">
<!-- Put a border around the expander -->
<Border Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
BorderBrush="{StaticResource GreyBrush}"
BorderThickness="2"
CornerRadius="3">
<!-- Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom -->
<DockPanel Margin="0">
<!-- Add the toggle button -->
<ToggleButton x:Name="ExpanderButton"
Content="{Binding Path=Name}"
DockPanel.Dock="Top"
FontSize="12"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpanderContent"
Margin="5"
ContentSource="Content"
DockPanel.Dock="Bottom"
Visibility="{Binding ElementName=ExpanderButton,
Path=IsChecked,
Converter={StaticResource VisibilityConverter}}" />
</DockPanel>
</Border>
</ControlTemplate>
</Expander.Template>
<Expander.Content>
<Border BorderBrush="{StaticResource BlackBrush}" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsPresenter Grid.Row="0" Margin="0" />
<Border Grid.Row="1"
Margin="0,10,0,0"
BorderBrush="{StaticResource BlackBrush}"
BorderThickness="0,1,0,0"
Visibility="{Binding Data.SettingRepository.MainDataSummaryVisible,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}">
<Grid Background="{StaticResource WhiteBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option1Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].Option1Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option2Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].Option2Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option3Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].Option3Data,
Mode=OneWay}" />
<TextBlock Grid.Column="6"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option4Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="7"
Margin="5"
Text="{Binding Path=Items[0].Option4Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="8"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleIsAnnealedColumnHeader}" />
<CheckBox Grid.Column="9"
Margin="3,5,5,5"
IsChecked="{Binding Path=Items[0].SampleIsAnnealed,
Mode=OneWay}"
IsHitTestVisible="False"
Style="{StaticResource FandFCheckBox}" />
</Grid>
<!-- The mean Match temperature -->
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.MeanSampleMatchTemperatureTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].SampleMeanMatchTemperature,
Mode=OneWay,
StringFormat=\{0:N2\}}" />
<!-- The match temperature range -->
<TextBlock Grid.Row="1"
Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleTemperatureRangeTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].SampleMatchTemperatureRange}" />
<!-- The match temperature standard deviation -->
<TextBlock Grid.Row="1"
Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleTemperatureStandardDeviationTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].SampleMatchTemperatureStandardDeviation,
Mode=OneWay,
StringFormat=\{0:N3\}}" />
<!-- The mean refractive index -->
<TextBlock Grid.Row="2"
Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleMeanRefractiveIndexTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].SampleMeanRefractiveIndex,
Mode=OneWay,
StringFormat=\{0:N5\}}" />
<!-- The refractive index range -->
<TextBlock Grid.Row="2"
Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleRIRangeTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].SampleRefractiveIndexRange}" />
<!-- The refractive index standard deviation -->
<TextBlock Grid.Row="2"
Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleRIStandardDeviationTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].SampleRefractiveIndexStandardDeviation,
Mode=OneWay,
StringFormat=\{0:N7\}}" />
</Grid>
</Border>
</Grid>
</Border>
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
You can set the ColumnHeaderStyle and there set a RenderTransform that moves the headers to the right.
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="RenderTransform">
<Setter.Value>
//change the X value accordingly
<TranslateTransform X="100"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
EDIT 2:
As you mentioned, doing this will result in a small gap. To remove it you should set the left margin of the first column to a negative value, which stretches the header of this column to the left. You can do it like this:
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
//change the margin accordingly
<Setter Property="Margin" Value="-100 0 0 0" />
<Setter Property="RenderTransform">
<Setter.Value>
//change the X value accordingly
<TranslateTransform X="100"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.HeaderStyle>
You have to set the RenderTransform here again, because this style overwrites the general ColumnHeaderStyle. To remove duplication you can add the render transfrom as a resource.
EDIT:
I just saw that you have a few margins on your Expanders and ContentPresenters. If you change them so that you have 0 margin to the left, it would align the content more to the left and reduce the alignment difference.
You would then need less offset on the RenderTransform.
Some examples of your code to illustrate what I mean:
<Expander Margin="5,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="5"
If you change it to
<Expander Margin="0,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="0 5 5 5"
the columns move more to the left.
This question already has an answer here:
WPF Grid horizontalalignment doesn't work. Sizes don't changes
(1 answer)
Closed 8 years ago.
In this window I have many different controls and I want to stretch which is possible
but there are some controls by 'stackGroup', 'listBox1', 'listBox2' that don't stretching.. Why ??
Also is this way i right to do this kind of pages
<Window x:Class="TwoColumnGridSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Window_Loaded"
Title="Window1" Height="759" Width="800">
<Grid Margin="0,0,0,95">
<Grid.RowDefinitions>
<RowDefinition Height="509"></RowDefinition>
<RowDefinition Height="111"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="472" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="165" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Stretch" Margin="0,0,0,163">
<ListBox Name="listBox1" SelectedItem="{Binding SelectedItem}" Width="165" ItemsSource="{Binding Buttons}" SelectionChanged="ListBox_SelectionChanged" HorizontalContentAlignment="Left" VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding .}" Click="Button_Click" Style="{StaticResource listboxbuttons}"></Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Name="stackGroup" HorizontalAlignment="Stretch" Grid.Column="1" Height="457" VerticalAlignment="Top" >
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="460" Margin="0,0,10,0" >
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="24" />
<RowDefinition Height="316"/>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Image x:Name="imageMap" Source="Resources/images.jpg" HorizontalAlignment="Stretch" Grid.Row="0" Stretch="Fill" Margin="2,0,0,0" />
<Border BorderBrush="Green" BorderThickness="3" CornerRadius="1,1,1,1" Margin="2,4,0,17" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2">
<Grid Grid.Row="1" Margin="3,3,3,3">
<GroupBox Header="Club Badge" HorizontalAlignment="Left" VerticalAlignment="Top" Height="123" Width="134"/>
<GroupBox Header="Goalie" HorizontalAlignment="Left" VerticalAlignment="Top" Height="179" Width="134" Margin="0,128,0,0"/>
<GroupBox Header="Defender" HorizontalAlignment="Left" Margin="139,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="MidFielder" HorizontalAlignment="Left" Margin="278,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="GroupBox" HorizontalAlignment="Left" Margin="417,0,0,0" VerticalAlignment="Top" Height="307" Width="155"/>
</Grid>
</Border>
<ProgressBar BorderBrush="#FF6081B0" HorizontalAlignment="Stretch" Margin="2,303,0,43" Value="45" Grid.Row="2" Foreground="#FF6081B0" Grid.RowSpan="2" />
</Grid>
</StackPanel>
</Grid>
<ListBox Height="96" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Bottom" Name="listBox2" Width="782" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="30 0 30 0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem Content="Vertical Item 1" />
<ListBoxItem Content="Vertical Item 2" />
<ListBoxItem Content="Vertical Item 3" />
<ListBoxItem Content="Vertical Item 4" />
<ListBoxItem Content="Vertical Item 5" />
</ListBox>
</Grid>
</Window>
Same answer as in this question. StackPanel will not respect stretch alignments in the same direction as its orientation. So a StackPanel whose orientation is vertical will not respect a VerticalAlignment of stretch for a child.
listBox1 doesn't stretch because it's VerticalAlignment is stretch and it's container StackPanel has an orientation of Vertical (that's its default). You could change that StackPanel to be horizontal, replace it with another container (such as a DockPanel), or remove it entirely since it only contains one element.
Similar reasoning can be applied to your other issues