I have a page in my wpf app where I have multiple devexpress grids rendered (Grid1, Grid2, Grid3 etc) via an items control and would like to make sure that their columns (Column1, Column2, Column3) are rendered the same width initially. For example: Column1 has always the same width in Grid1, Grid2 and Grid3 and Column2 has always the same width in Grid1, Grid2 and Grid3 regardless of what data they are showing.
How can I achieve this?
<ItemsControl Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
x:Name="Grids" Margin="-5,0,0,0"
ItemsSource="{Binding Items, Mode=TwoWay}"
Background="Transparent"
BorderThickness="0"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="10,5,0,25" Width="Auto" MinWidth="750">
<dxg:GridControl MaxHeight="250" MinHeight="100" MinWidth="700"
ItemsSource="{Binding Statuses}"
AutoGenerateColumns="None" SelectionMode="None">
<dxg:GridControl.Columns>
<dxg:GridColumn Header="Column1" FieldName="Field1" UnboundType="Object" SortIndex="0" AllowSorting="True" ReadOnly="True" />
<dxg:GridColumn Header="Column2" FieldName="Field2" UnboundType="Object" ReadOnly="True" SortIndex="1" SortMode="Value" Binding="Field2" />
</dxg:GridControl.Columns>
</dxg:GridControl>
<!-- Code left out for brewity sake... -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Related
I have a horizontal ListBox in my WPF window, and each item within it contains another vertical ListBox within it.
I want to be able to scroll vertically either within the internal ListBox or the external one.
Scrolling horizontally is not an issue as it automatically lets me do it when the item list is bigger than the ListBox margins, however i failed to make either of my ListBoxes to be vertically scrollable.
I have tried using ScrollViewer.VerticalScrollBarVisibility="Visible" on either ListBox but the scrollbar is grayed out and unusable, even though there are items outside the margins of the ListBox.
My XAML:
<StackPanel>
<Grid Margin="100">
<ListBox x:Name = "ColumnList" ItemsSource="{Binding Board.Columns}" VerticalAlignment="Top" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush = "Black" MinWidth="200" MaxWidth="200" MinHeight="300" MaxHeight="300" ScrollViewer.VerticalScrollBarVisibility="Visible">
<StackPanel>
<TextBox Text = "{Binding Name}" IsReadOnly="True"/>
<ListBox x:Name="TasksList" ItemsSource="{Binding Tasks}" MouseDoubleClick="TasksList_MouseDoubleClick" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectedItem="{Binding Path=DataContext.Task,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush = "Black" BorderThickness="2">
<StackPanel>
<TextBox Text = "{Binding Title}" IsReadOnly="True" />
<TextBox Text="{Binding Description}" IsReadOnly="True"/>
<TextBox Text = "{Binding CreationDate}" IsReadOnly="True" />
<TextBox Text="{Binding DueDate}" IsReadOnly="True"/>
<TextBox Text = "{Binding EmailAssignee}" IsReadOnly="True" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel >
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</StackPanel>
you have to change outer ListBox ItemTemplate - use Grid instead of StackPanel. Inner ListBox in StackPanel get the height to display all items, so scroll can't be activated, even if those items are not seen on the screen.
<DataTemplate>
<Border BorderBrush = "Black"
MinWidth="200" MaxWidth="200"
MinHeight="300" MaxHeight="300"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Text = "{Binding Name}" IsReadOnly="True"/>
<ListBox x:Name="TasksList" Grid.Row="1">
<!--omitted for clarity-->
</ListBox>
</Grid>
</Border>
</DataTemplate>
i have create my own tree-view with multi column Headers using standard wpf controls
Dock Panel
DataGrid , Just for creating the columns and having sorting and resizing capabilities. The height of datagrid is only 25 , we only need to show columns not data here.
The TreeView Control with hierarchy
i have add the image just to understand the problem and the XAML code
The Account Type should be always align at the left no matter how many levels are expanded in the "first column"
somewhere in the xaml of the TreeViewItemTemplate i lost the idea.. Can anyone help me to fix the alignments
<DockPanel DataContext="{StaticResource cust}">
<Button Command="{Binding rld}" Content="reload" DockPanel.Dock="Top"/>
<!--Unbound DataGrid just to display the headers-->
<DataGrid Height="25" DockPanel.Dock="Top" ItemsSource="{Binding Customers}" AutoGenerateColumns="False" Margin="0,0,0,0">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Header="Name" x:Name="col0"></DataGridTextColumn>
<DataGridTextColumn Binding="{Binding AccountType}" Header="Account Type" x:Name="col1"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
<!--Actual Binding with Tree View and item Template to display the properties-->
<TreeView ItemsSource="{Binding Customers}" DockPanel.Dock="Top">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding rel}">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=col0,Path=ActualWidth}"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=col1,Path=ActualWidth}" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{Binding AccountType}" VerticalAlignment="Center" />
</Grid>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</DockPanel>
The TreeView naturally indents child items, so its normal what you see.
A possible fix could be to set a negative left margin in the AccountType TextBlock with the same value of the indent, therefore neutralizing the gap.
You need to apply it only if its parent is expanded. This can easily be done modifying a bit your viewmodels.
<TextBlock Grid.Column="1" Margin="{Binding marginPropertyInVM}" Text="{Binding AccountType}" VerticalAlignment="Center"/>
You can limit the size of your first column by changing your template grids column definition to:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="{Binding ElementName=col1,Path=ActualWidth}" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{Binding AccountType}" VerticalAlignment="Center" />
</Grid>
This way the first column will only be allowed the remaining width once the 2nd column and indent have been allocated their space.
I am trying to fit Textblock and a button in DataGrid Cell. The Textblock holds a portion of my text and when I click the button a dialog is display. I general my code looks like the one below
<DataGridTemplateColumn Header="Message" Width="Auto" MinWidth="60">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientetion="Horrizontal">
<TextBlock MinWidth="200" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />
<Button DockPanel.Dock="Right" Width="90" Margin="1" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
I want the Button to be always at righter side of the cell and its width to be fixed. The TextBlock needs to be variable, for example when I resize the window, and so the DataGrid, the TextBlock should stretch also.
The problem is that, I can not achieve this behaviour / view. The TextBlock varies on each DataGrid line and in some case the button is not at the righter of the cell.
I tried to change the StackPanel to Grid or DockPanel but still I can not get the desirable result.
Using Grid
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />
<Button Grid.Column="1" Margin="1" />
</Grid>
Any thoughts to share?
StackPanel doesn't really have the concept of aligning to the right. It stacks the elements as close as it can. You can get around this in different ways but in this case, use a DockPanel instead:
<DockPanel>
<Button DockPanel.Dock="Right" Width="90" Margin="1" />
<TextBlock MinWidth="200" TextTrimming="CharacterEllipsis" Text="{Binding Text}" />
</DockPanel>
Note that I moved the TextBlock to be the last child element of the DockPanel. DockPanel, after laying out the other child elements, allocates the remaining space to the last child element (unless you specify LastChildFill=false). In this case, we want the TextBlock to take up the remaining space.
UPDATE: based on the comments above, in addition to changing the panel type to a DockPanel (or Grid), you can use DataGridTemplateColumn.Width to a fixed value instead of Auto. This would make the column load with the specified with but the user can still modify the column with if they want to:
<DataGridTemplateColumn Header="Message" Width="60" MinWidth="60">
I'd set a static value to the DataGridTemplateColumn.Width--it can help with rendering performance. Set the size on your buttons too, so it doesn't size to fit text.
This works for me (I used the border for visualization purposes):
<Window ...
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Model}"
x:Key="VmItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock Grid.Column="0" TextTrimming="CharacterEllipsis" Text="{Binding Original}" />
</Border>
<Button Grid.Column="1" Margin="1" Content="{Binding Encoded}" MinWidth="90" MaxWidth="90"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Message" CellTemplate="{StaticResource VmItem}" Width="300" MinWidth="100"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
Proof:
I have a listbox control in my app.
I want to change his style to being look like to Datagrid (borders, columns, row...).
I don't want to using stantard datagrid - because its control cannot binding itemtemplte.
I trying to do it:
<ListBox
ItemsSource="{Binding Items}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Name="listBox1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Id}" Margin="5"/>
</Border>
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Name}" Margin="5"/>
</Border>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But it not looking good - as following:
it what i want to achieve:
Using Grid.IsSharedSizeScope
result
i believe you want the columns to be re-sized based on your string length, so Grid.IsSharedSizeScope is your choice here
example xaml
<ListBox ItemsSource="{Binding Items}"
Grid.IsSharedSizeScope="True">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="name" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border BorderThickness="1"
BorderBrush="Black">
<TextBlock Text="{Binding Name}"
Margin="5" />
</Border>
<Border BorderThickness="1"
Grid.Column="1"
BorderBrush="Black">
<TextBlock Text="{Binding Id}"
Margin="5" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
if you move SharedSizeGroup to id like below
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition SharedSizeGroup="id" />
</Grid.ColumnDefinitions>
result
Using ListView with GridView
You have an option to use list view with grid view which will have same appearance as grid with flexibility of list
eg
<ListView ItemsSource="{Binding SourceItems}">
<ListView.View>
<GridView>
<GridViewColumn Header="Column1"
DisplayMemberBinding="{Binding Column1}" />
<GridViewColumn Header="Column2"
DisplayMemberBinding="{Binding Column2}" />
</GridView>
</ListView.View>
</ListView>
GridViewColumn offers you to modify CellTemplate, HeaderTemplate, HeaderContainerStyle, HeaderStringFormat etc.
I am sure you can achieve this using a grid control (It supports binding and everything else)
To fix your problem, you will have to give fixed widths to both your borders inside your stackpanel then your listbox items will look like a grid control.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border Width="150" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Id}" Margin="5"/>
</Border>
<Border Width="50" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Name}" Margin="5"/>
</Border>
</StackPanel>
Please let us know what problem you are having with GridControl and maybe we can fix that as well
Edit. If you were using a DataGrid your template would look like
<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False" HeadersVisibility="None">
<DataGrid.Columns>
<DataGridTemplateColumn Header="" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text={Binding Id}/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="" Width="SizeToCells" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text={Binding Name}/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Please note that I have set HeaderVisibility to false so that it doesnt look like a datagrid but instead looks like a list
I am trying to create a flyout for settings using MahApps.Metro inside of a MetroWindow control using WPF. I have created the flyout and have several other radio buttons and seperators. I am now adding a datagrid to hold a list of StockSymbols used as a watch list for my application. What I am having trouble with is properly setting the datagrid so that it does not autogrow past the size of the flyout. If you add rows to the datagrid you can keep adding until it flows offscreen ouside of the window. I would like to do it so that I don't have to manually set the max Height and for it to dynamically grow as the window grows.
Here is my current code for the flyout:
<Controls:MetroWindow.Flyouts>
<Controls:Flyout Header="Settings"
Background="#9f000000"
Position="Right"
IsOpen="{Binding IsSettingsFlyoutOpen}">
<DockPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<StackPanel Orientation="Vertical"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Margin="20,0"
DockPanel.Dock="Top">
<Label Content="Theme"
Style="{StaticResource DescriptionHeaderStyle}" />
<StackPanel Orientation="Horizontal">
<RadioButton Content="Dark"
Margin="0,0,5,0"
IsChecked="True"
Checked="ThemeDark" />
<RadioButton Content="Light"
Margin="0,0,5,0"
Checked="ThemeLight" />
</StackPanel>
<Separator Margin="0,10,0,10" />
<Label Content="Accent"
Style="{StaticResource DescriptionHeaderStyle}" />
<StackPanel Orientation="Vertical">
<RadioButton Content="Black"
Margin="0,5,0,0" />
<RadioButton Content="Blue"
Margin="0,5,0,0"
Checked="AccentBlue" />
<RadioButton Content="Red"
Margin="0,5,0,0"
Checked="AccentRed" />
<RadioButton Content="Green"
Margin="0,5,0,0"
Checked="AccentGreen" />
<RadioButton Content="Orange"
Margin="0,5,0,0"
IsChecked="True"
Checked="AccentOrange" />
<RadioButton Content="Purple"
Margin="0,5,0,0"
Checked="AccentPurple" />
</StackPanel>
<Separator Margin="0,10,0,10" />
</StackPanel>
<StackPanel Orientation="Vertical"
Height="Auto"
VerticalAlignment="Top"
DockPanel.Dock="Bottom"
Margin="20,0">
<Label Content="Watch List"
Style="{StaticResource DescriptionHeaderStyle}" />
<DataGrid ItemsSource="{Binding WatchList}"
AutoGenerateColumns="False"
CanUserResizeRows="False"
CanUserReorderColumns="False"
HeadersVisibility="Column">
<DataGrid.Columns>
<DataGridTextColumn Header="Symbol"
Binding="{Binding Symbol}" />
<DataGridTextColumn Header="Name"
Binding="{Binding Name}" />
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DockPanel>
</Controls:Flyout>
</Controls:MetroWindow.Flyouts>
Any and all help is appreciated.
I solved this question by using only a Dock Panel to hold all the controls inside the Flyout. The all controls but the data grid should be set to top docking and no docking set on the datagrid. This then auto sizes the datagrid to fill the remaining space and no more.
I had the same problem.
I solved this issue setting the Flyout size.
I think the problem occurs when WPF render the grid and the Flyout size is smaller than grid size.
anyway, our Flyout was dynamic, I had to create a Converter to get its size and set my child control to same width