Simple code:
<ItemsControl Grid.IsSharedSizeScope="True" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="firstColumn" Width="Auto"/>
<ColumnDefinition SharedSizeGroup="splitterColumn" Width="Auto"/>
<ColumnDefinition SharedSizeGroup="lastColumn" Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Key}"/>
<GridSplitter Width="5" Grid.Column="1" />
<TextBlock Text="{Binding Path=Value}" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Problem is occured with lastColumn, width of it is not 100%. I try to set HorizontalAlignment="Stretch" for the all grids but it didn't help.
Width of lastColumn must be 100%. How to resolve this issue?
You don't need to include SharedSizeGroup on every column. In this case, if your first and second columns are sharing a size, you should be able to get your desired behaviour by omitting the property on the last column. There should always be the same amount of space for the last column, if the first two columns are sharing sizes:
<Grid Width="300" Height="30" Background="Red">
<Grid Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="firstColumn" Width="Auto"/>
<ColumnDefinition SharedSizeGroup="splitterColumn" Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Text="1" Grid.Column="0"/>
<GridSplitter Width="5" Grid.Column="1"/>
<TextBox Text="Test" Grid.Column="2" />
</Grid>
</Grid>
Edit: This is essentially the problem encountered here: Grid.IsSharedScopeSize incompatible with * columns in WPF Grid
Further edit: You've changed to an ItemsControl now, but the same should still apply.
Related
I am Using treeview in XAML. Inside the treeview item am having 3 grid columns. First Column in logo which is common width. but second and third column width is based on text which is binding from backend. The second column not resizing based on max width cell that particular column based on rows values.
Please refer below screenshot
I want this file location text (Gray text) start at same position based on previous column max cell width.
Below is my code
<HierarchicalDataTemplate
<Grid Grid.IsSharedSizeScope="True" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" SharedSizeGroup="b"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" SharedSizeGroup="c"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="12" Margin="0,0,4,0" Height="auto" Source="img.png""/>
<TextBlock Grid.RowSpan="5" Grid.Column="1" Text="{Binding kmkmkmkm}" Margin="0,7,0,0" Height="20" FontSize="12">
</TextBlock>
<TextBlock Grid.Column="2" Text="{Binding loc}" Margin="10,7,0,0" Height="20" FontSize="12" Foreground="Gray">
</TextBlock>
</Grid>
</HierarchicalDataTemplate>
Suggest me on this.
After analyzing many solution, found we cannot share like this with shared size scope.
<HierarchicalDataTemplate>
<Grid Name="Grid2" HorizontalAlignment="Left" Grid.IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Width="250">
</StackPanel>
<TextBlock HorizontalAlignment="Left" Width="Auto" VerticalAlignment="Center" Grid.Column="2">
</TextBlock>
</Grid>
</HierarchicalDataTemplate>
I am trying to Align my ListView items in dynamic way without setting explicitly Width for them. The problem i am getting is aligning them the attribute name that is above them. i.e attribute Name should have Coke below it, Quantity should have Integer value number and Subtotal should have floating points below it.
if i resize my Windows the ListView should also change with the respective attribute name but it doesn't. I have tried RelativePanel, ListBox for them but nothing works without explicity giving a width which i want it to be dynamic.
<Grid Grid.Column="2" Margin="5,0,5,0">
<ScrollViewer VerticalScrollBarVisibility="Hidden">
<StackPanel>
<TextBlock Style="{StaticResource MyTextBlock1}" FontSize="20" HorizontalAlignment="Center" Margin="0,0,0,10">Order Summary</TextBlock>
<RelativePanel>
<TextBlock Name="ItemName" Style="{StaticResource MyTextBlock1}" FontSize="12">Name</TextBlock>
<TextBlock Name="ItemPrice" Style="{StaticResource MyTextBlock1}" FontSize="12" RelativePanel.AlignRightWithPanel="True">SubTotal</TextBlock>
<TextBlock Name="ItemQuantity" Style="{StaticResource MyTextBlock1}" Margin="0,0,10,0" FontSize="12" RelativePanel.LeftOf="ItemPrice">Quantity</TextBlock>
</RelativePanel>
<ListView ItemsSource="{x:Bind dumbList}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Dumb">
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind name}"/>
<TextBlock Text="{x:Bind id}" Grid.Column="1"/>
<TextBlock Name="Quatity" Text="{x:Bind price}" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
CLICK HERE!! for the image
Edit:
You can create one item with the DataTemplate layout above the listview.
To avoid setting explicitly the Width, you can set the HorizontalAlignment to Stretch (similiar to Android XML fill_parent) and use Margin.
Example:
<Grid
HorizontalAlignment="Stretch"
Margin="12,12,12,12"
Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Name"/>
<TextBlock Text="Quantity" Grid.Column="1"/>
<TextBlock Text="SubTotal" Grid.Column="2"/>
</Grid>
<ListView ItemsSource="{x:Bind dumbList}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Dumb">
<Grid
HorizontalAlignment="Stretch"
Margin="12,12,12,12"
Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind name}"/>
<TextBlock Text="{x:Bind id}" Grid.Column="1"/>
<TextBlock Name="Quatity" Text="{x:Bind price}" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Your column definitions should be percentages, not whole values.
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".8*"/>
<ColumnDefinition Width=".1*"/>
<ColumnDefinition Width=".1*"/>
</Grid.ColumnDefinitions>
.8 = 80% .1 = 10% .1 = 10% Total = 100%
Your definitions are:
3 = 300% 1 = 100% 1 = 100% Total = 500% !!
I current have a WPF application that contains a ListBox of Grid items.
These grids have 2 columns each and the first column contains text and the second one contains an ellipse.
My issue is that I currently have both ColumnDefinition set to have width of .5* so they each take 50% of the total width. However, this doesn't work when the text is too long or else it pushes the ellipse in the second column out of line with the rest of the ellipses in the list (looking vertically from top to bottom).
Basically this is what I get:
What I would like to happen is have all of the elipses in-line no matter how long the text in the first column is.
I've tried placing the first column's text inside of a ViewBox to auto-size it but that doesn't seem to work either.
Here is the full XAML for the DataTemplate:
<Grid x:Name="MainTermServListGrid">
<Grid.RowDefinitions>
<RowDefinition x:Name="MainTermServMainRow"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding TServer}" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid x:Name="OldPathGrid" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="Uniform">
<TextBlock Grid.Column="0">
<Run Text="Path: "/>
<Run Text="{Binding OldPath}"/>
</TextBlock>
</Viewbox>
<Ellipse Grid.Column="1" HorizontalAlignment="Center" Width="{Binding ElementName=MainTermServListGrid, Path=ActualHeight}" Fill="{Binding IsOldPathValid, Converter={StaticResource ValPthToBgClr}}"/>
</Grid>
<Grid x:Name="NewPathGrid" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0">
<Run Text="Path: "/>
<Run Text="{Binding NewPath}"/>
</TextBlock>
<Ellipse Grid.Column="1" Width="{Binding ElementName=MainTermServListGrid, Path=ActualHeight}" Fill="{Binding IsNewPathValid, Converter={StaticResource ValPthToBgClr}}"/>
</Grid>
</Grid>
You should take a look at SharedSizeGroup
Essentially:
<ItemsControl ItemsSource="{Binding SomeItems}"
Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="ColA" Width=".5*" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsControl.ItemTemplate>
</ItemsControl>
Using the SharedSizeScope and SharedSizeGroup, you can ensure columns / rows are the same size across different grids within the same containing scope
NOTE: It doesn't have to be an ItemsControl any container using the attached property Grid.IsSharedSizeScope will ensure that grids contained within will pay attention.
I am confused about the Grid's behaviour inside a ContentTemplate:
I want to style my ListView:
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ArticleID}"
Grid.Column="0"
/>
<TextBlock Text="{Binding ArticleName}"
Grid.Column="1"
/>
<Button Command="{Binding DataContext.RemoveComponentFromVehicle, RelativeSource={RelativeSource AncestorType=Grid}}"
Grid.Column="2"
>
<Button.Content>
<StackPanel Style="{StaticResource IconTextCombo}">
<Image Source="{StaticResource ComponentToVehicle_Delete}"/>
</StackPanel>
</Button.Content>
</Button>
</Grid>
As you can see, I want to make sure that my buttons align right on the right side because the ArticleID and Name length can vary.
The buttons aren't align as I want and expect. I have a test project:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox Text="Foo"
Grid.Column="0"/>
<TextBox Text="Bar"
Grid.Column="1"/>
<Button Content="DELETE"
Grid.Column="2"/>
<TextBox Text="Hello World"
Grid.Column="0"
Grid.Row="1"/>
<TextBox Text="LONG TEXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXT"
Grid.Row="1"
Grid.Column="1"/>
<Button Content="DELETE"
Grid.Row="1"
Grid.Column="2"/>
</Grid>
In this 'hardcoded' version every aligns as I want... I don't know why my grid is so weird in the Template. Can someone help me?
Thanks in advance!
Here is the solution after working around:
<ListView DockPanel.Dock="Right"
ItemsSource="{Binding}"
SelectedItem="{Binding }"
Name="lvMain"
HorizontalContentAlignment="Stretch"
>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ArticleID}"
Grid.Column="0"
/>
<TextBlock Text="{Binding ArticleName}"
Grid.Column="1"
/>
<Button Command="{Binding }"
Grid.Column="2"
>
<Button.Content>
<StackPanel Style="{StaticResource IconTextCombo}">
<Image Source="{StaticResource img}"/>
</StackPanel>
</Button.Content>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have tested it with ListBox and ListView... It works for both of them as I want now!
Thanks to all helpers!
you need to use the SharedSizeGroup property on your grid in your template. It works in your hardcoded example because all your elements sit inside the same grid. Once you place them inside a ListBox every item has its own grid and is unaware of the other grids.
Setting this property will make sure all these columns have the same size regardless which grid they are in.
your Grid.ColumnsDefinitions should look like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" SharedSizeGroup="ColumnA"/>
<ColumnDefinition Width="auto" SharedSizeGroup="ColumnB"/>
<ColumnDefinition Width="auto" SharedSizeGroup="ButtonsColumn"/>
</Grid.ColumnDefinitions>
You should also use ItemTemplate meaning:
<ListBox>
<ListBox.ItemTemplate>
*****Your Posted Code ************
</ListBox.ItemTemplate>
</ListBox>
I am attaching a image
I wanna create gap between MyTask(text) and setting image icon. I can achieve it using margin property. but when my windows phone orientation changes it looks bad. Is there a way that my setting image will always stick to right side and text on left side. how can i create gap between text and image, by avoiding fixed values.
this is my code.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Height="35" Source="/Assets/Icons/MyTasks.png"></Image>
<TextBlock Grid.Column="1" Margin="10,0,0,0" Text="MY TASKS"></TextBlock>
<Image Margin="200,0,0,0" Grid.Column="3" Height="40" Source="/Assets/Icons/Settings.png"></Image>
</Grid>
Check this sample.
This is excerpt of the Pivot template. First and third column definition must be: Width="Auto".
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Height="35"
HorizontalAlignment="Left"
Margin="12,0,0,0"
VerticalAlignment="Bottom"
Source="/Assets/Icons/MyTasks.png" />
<ContentControl
ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="0,0,0,-7"
VerticalAlignment="Center"
Style="{StaticResource PivotTitleStyle}"/>
<Image
Grid.Column="2"
Height="35"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Source="/Assets/Icons/Settings.png" />
</Grid>