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% !!
Related
I have this XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="1" x:Name="layers" Grid.ColumnSpan="1">
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Height="100" Width="100" Margin="5"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Column="2" Grid.ColumnSpan="2">
<Button Height="20" Content="Add layer" Click="aL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
<Button Height="20" Content="Add static layer" Click="aSL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
</StackPanel>
</Grid>
As you can see, ListView is in column 1 of Grid and the StackPanel is in column 2 of Grid. But when I run this and add Image to ListView, the ListView (and Image) are showing in column 2 of Grid, after StackPanel.
What is wrong and how do I fix it?
I just done what I want this way:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" x:Name="layers">
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Height="100" Width="100" Margin="5"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Column="1">
<Button Height="20" Content="Add layer" Click="aL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
<Button Height="20" Content="Add static layer" Click="aSL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
</StackPanel>
</Grid>
Comment from Clemens helped me.
First column is column "0" and not "1".
There is no sense for expression Grid.ColumnSpan="1" because it is default value as well as Grid.Column="0".
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 having trouble getting the text in a TextBlock to wrap. The TextBlock is inside a Grid, which is part of a ListBoxItem template. Below is my XAML:
<ListBox Grid.Row="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Center" VerticalAlignment="Top" Height="600" Width="600" Name="lb_TestResults" ItemsSource="{Binding Test}" Margin="5,5,5,5">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DarkGray" BorderThickness="1" Padding="4">
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Name="tb_nameLabel" Margin ="0, 0, 3, 0" FontSize="15" FontFamily="Verdana" Grid.Row="0" Grid.Column="0"><Bold>Test: </Bold></TextBlock>
<TextBlock Name="tb_Name" Text="{Binding Name}" FontSize="15" FontFamily="Verdana" Grid.Row="0" Grid.Column="1"></TextBlock>
<TextBlock Name="tb_descLabel" Margin="0, 0, 3, 0" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"><Bold>Description: </Bold></TextBlock>
<TextBlock Name="tb_Description" Text="{Binding Description}" Grid.Row="1" Grid.Column="1" ></TextBlock>
<TextBlock Name="tb_statusLabel" Margin="0, 0, 3, 0" Grid.Row="2" Grid.Column="0"><Bold>Status: </Bold></TextBlock>
<TextBlock Name="tb_Status" Text="{Binding Status}" Grid.Row="2" Grid.Column="1"></TextBlock>
<TextBlock Name="tb_resultLabel" Margin="0, 0, 3, 0" Grid.Row="3" Grid.Column="0"><Bold>Result: </Bold></TextBlock>
<TextBlock Name="tb_Result" Text="{Binding Result}" Grid.Row="3" Grid.Column="1"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I originally had the TextBlocks inside StackPanels, but reading various other questions on this topic such as this, I decided to change it to a Grid. I only need the TextBlock tb_Description to word wrap. Right now the output looks like this:
As you can see the text is not wrapping.
I have tried setting the width explicitly on the TextBlocks, the Grid columns, and the ListBox, but nothing has helped so far. I also disabled the horizontal scrollbar, the scrollbar is gone now but the text is still trailing off the edge. Any ideas?
The problem is not with the ListBox but with the Grid you are using to align text blocks. Both columns are set to Auto which results in Grid allowing columns to occupy all space their content requests for.
You need to set Width of the second ColumnDefinition to *:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
Hi you must set the 2nd column to * so it stretches and you have swapped the TextBlock that should wrap, just a "typo" :)
Change
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<!-- And these here you have set the wrong textblock to wrap =) -->
<TextBlock Name="tb_descLabel" Margin="0, 0, 3, 0" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"><Bold>Description: </Bold></TextBlock>
<TextBlock Name="tb_Description" Text="{Binding Description}" Grid.Row="1" Grid.Column="1" ></TextBlock>
To
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- ..... -->
<TextBlock Name="tb_descLabel" Margin="0, 0, 3, 0" Grid.Row="1" Grid.Column="0"><Bold>Description: </Bold></TextBlock>
<TextBlock Name="tb_Description" Text="{Binding Description}" Grid.Row="1" Grid.Column="1" TextWrapping="Wrap"></TextBlock>
Result
Cheers!
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.
I have a ListBox and I need to repeat the styles to be the same for all the listbox items. Only the placeholders are going to change. For example, the following listbox item has three elements - An Image, a header text and a description text. I have styled it. Now I need to apply the same style for the listboxitems that I follow. Currently I am doing a copy paste for all the items which is not the right way.
I can do this via ListBoxTemplate and DataTemplate but I need to write the code in .cs file which I don't want to. Help me how to achieve the template effect ?
Here is the code for the above listboxitem.
<ListBoxItem>
<Grid Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
<StackPanel Grid.Column="1">
<TextBlock Text="Item heading" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="item description" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Grid>
</ListBoxItem>
I need place holder for the image, header text and content text in all the listboxitems that I add. How to achieve this?
This is how you can achieve it :
<Page.Resources>
<DataTemplate x:Key="ListTemplate">
<Grid Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding ItemHeading}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding ItemDescription}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid>
<ListBox ItemTemplate="{StaticResource ListTemplate}" ItemsSource="{Binding YourList}">
</ListBox>
</Grid>
You can put the Resource in App.XAML so it can be accessed by all pages, and you can use it on all ListBoxes in your Application. Note that elements in your YourList should have ItemHeader and ItemDescription properties
You can create a dataitem template like this
<DataTemplate x:Key="DataTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Image}" Width="10" Height="10"/>
<TextBlock Grid.Column="1" Text="{Binding ID}"/>
<TextBlock Grid.Column="2" Text="{Binding content}"/>
</Grid>
</DataTemplate>
and then bind this data template to the list and then bind the item to the list.. :)
u can bind collection of list with class
You can create a class with three variables image,id and content so that u can make a list of that class and bind to the list
Create/Use a ListItem ItemTemplate