Have been making a bit of research on this but haven't been able to solve it:
I have a GridView, here is all the code for it:
<GridView Name="NewsGrid" IsItemClickEnabled="True" ItemClick="NewsGrid_ItemClick">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:News">
<Grid Height="Auto" Margin="0" Width="440">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{x:Bind Image}"
HorizontalAlignment="Center"
Stretch="UniformToFill"
Margin="5"
Height="247"
Width="440"/>
<TextBlock Text="{x:Bind Body}"
Foreground="SteelBlue"
Grid.Row="1"
Height="Auto"
HorizontalAlignment="Stretch"
Width="440"
Margin="5 0 5 0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
What I am trying to accomplish is for the TextBlock to wrap if the length of the text goes over 440 pixels. The code above does not accomplish that. To give you some visuals, here is the result from the code above:
So that last word is "Pass" and ask you can see it just keeps going. I just want it to break into a new line underneath. How can I achieve this? I have also tried to swap my Grid for a StackPanel but the result is the same.
Update 1
Added TextWrapping="Wrap" to my TextBlock, visual result is this:
The last word doesn't show up anymore, not even in the same line.
Add TextWrapping="Wrap" to your TextBlock.
Also!
For the definitions of rows this has to happen:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Related
I have a WPF Window which has a Tab Control, in the third row of Grid, which contains a DataGrid. The DataGrid is being populated with data from EF and when the data is loaded, the DataGrid is going beyond the bounds of the window.
I've tried various solution (e.g. setting the Vertical/Horizontal Alignments to Stretch) but nothing I have tried worked. Below is a snippet of code up to the first open tag of the DataGrid (there are actually three tabs each with a DataGrid, but they are all the same, just bound to a different data source). With the below XAML, the width binds correct (i.e. the DataGrid doesn't go beyond the right side of the window) but the horizontal part of the DataGrid does go beyond the bottom of the window:
<Grid Margin="5,0,5,0" Background="Blue" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<user_controls:Spinner x:Name="spinner" Grid.RowSpan="3" Panel.ZIndex="1000"/>
<Menu Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<MenuItem Header="Exit" Click="Exit_Click"/>
<MenuItem Header="Save" Command="{StaticResource SaveCommand}"/>
</Menu>
<GroupBox Grid.Row="1" Header="Server Type" Margin="610,0,0,0">
<StackPanel Orientation="Horizontal" Margin="0,5,0,0" HorizontalAlignment="Right">
<RadioButton x:Name="rbTestServer" GroupName="ServerType" Content="TEST" Foreground="Red" IsChecked="true" Checked="ServerType_Checked"/>
<RadioButton x:Name="rbProductionServer" GroupName="ServerType" Content="PRODUCTION" Foreground="Green" Margin="10,0,10,0" Checked="ServerType_Checked"/>
</StackPanel>
</GroupBox>
<TabControl x:Name="tcTables" BorderBrush="Red" BorderThickness="5" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="371" Height="auto" MinWidth="782" Width="auto" SelectionChanged="TcTables_SelectionChanged">
<TabItem x:Name="tiChargeType" Header="Charge Type">
<DataGrid x:Name="dgChargeType" Background="#FFE5E5E5" AutoGenerateColumns="False" EnableRowVirtualization="True" ItemsSource="{Binding Source={StaticResource vsChargeType}}" Margin="2,10,10,10" RowDetailsVisibilityMode="VisibleWhenSelected" CellEditEnding="CellEditEnding">
Any help/suggestions would be greatly appreciated.
Thank You
You have three rows in your grid:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Because the third is set to Auto height, it tells it's content to go as big as it likes.
This is the cause of your problem.
Change that to:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Then your tab control and hence the datagrid in it will have a height limited to whatever is left after rows 0 and 1.
I can't figure out the syntax to tell the ListView its height is the height of the row that contains the ListView, that is, the ListView's Parent.
This is the xaml in the user control. I have put what I thought would work, but doesn't. I left it there so you would see what I am attempting.
<ListView Grid.Row="1"
Height="{Binding Path=Height,RelativeSource={RelativeSource AncestorType=Grid.Row}}"
ItemsSource="{Binding Folders}"
ItemTemplate="{StaticResource FolderListTemplate}"
SelectionMode="Single"
SelectedIndex="1"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="3"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.CanContentScroll="True"
/>
Thanks,
Just set the RowDefinition height to Auto, here is my xaml:
<Grid Background="DimGray">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<StackPanel Background="CornflowerBlue"/>
<ListView Grid.Row="1"
x:Name="ListView"
ItemsSource="{Binding Items}"
SelectionMode="Single"
SelectedIndex="1"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="3"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.CanContentScroll="True"/>
<StackPanel Grid.Row="2" Background="CornflowerBlue"/>
</Grid>
And the output:
If you use star notation then the row it is goin to take the available height for the star value you gave, in this case 1* which is the same as *****.
If I modify to use star value as you:
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
The output:
Hope this helps
As the title of the post, I want to make a GridView which can wrap all of it's contents inside, it means if I have 3 items, each of them has 50px of height, so how to make a GridView contains these item that has 50*3=150px of height.
How to do that, please help me!
P/s: I want to do it by configuring XAML code, not in C# code, thanks!
I found out the answer! Just set the height of the GridView to Auto by make it inside a Grid row.
<Grid Grid.Row="0"
Margin="12,24">
<Grid.RowDefinitions>
<RowDefinition Height="64" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Opacity=".8"
Background="White"
Height="64">
<Grid Margin="8">
<TextBlock Text="Students"
VerticalAlignment="Center"
FontSize="24" />
</Grid>
<Grid Height="2"
VerticalAlignment="Bottom"
Background="#B0BEC5" />
</Grid>
<GridView Background="White"
Name="grvMatchGA"
Grid.Row="1"
ItemTemplate="{ThemeResource groupItemTemplate}"
Opacity=".8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Stretch">
</GridView>
</Grid>
If you don't provide height for gridview but it's children, it automatically takes the height equivalent to sum of children's height.
For example, you can do something like this-
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0"/>
<TextBox Grid.Row="1"/>
<Button Grid.Row="2"/>
</Grid>
I have a simple Grid with two rows, the first having a fixed height. Inside, I have an element with RowSpan="2", and on top another element which should reside only in the first row:
<Grid Background="Lime">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="2" Height="50" Fill="Blue"/>
<TextBlock Grid.Row="0" Text="Foo" VerticalAlignment="Center" Background="Red"/>
</Grid>
However, the actualheigth of the first row simply ignores the Height setting, beeing much larger than expected.
Is this a bug in the Grid? How can I workaround this?
I think you want something like this:
<Grid Background="Lime">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="2" Height="50" VerticalAlignment="Center" Fill="Blue"/>
<TextBlock Grid.Row="0" Text="Foo" VerticalAlignment="Center" Background="Red"/>
</Grid>
I'm not sure if having a RowSpan that covers a RowDefinition with Height="*" would work out.
i also tried this a few times, but it won't work. I think it's by design. Can't you just put the rectangle as a parent of the grid in the xaml?
It does not seem to work this way
Instead, I simply used the VerticalAlignment property to move the TextBlock to the top, and completely removed the RowDefinitions:
<Grid Background="Lime">
<Rectangle Height="50" Fill="Blue"/>
<TextBlock Grid.Row="0" Text="Foo" VerticalAlignment="Top" Background="Red" Height="20"/>
</Grid>
In this case you must use VerticalAlignment to stretch in order to fill your RowDefinition's Height.
<Grid Background="Lime">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="2" Height="50" Fill="Blue"/>
<TextBlock Name="texto" Grid.Row="0" Text="Foo" VerticalAlignment="Stretch" Background="Red"/>
</Grid>
On this way you will see your TextBox stretched to the Row height.
I'm really new to XAML and Metro and my old HTML skills are not in my advance.
What i want to achive is to have 3 "rows", the top row as some kind of header, the last row as some kind of footer and then a scrollable content area in the middle.
How can I achive this in XAML for Metro?
I've tried the StackPanel but I can't get the middle one to stop expanding and putting my "footer" out or the screen.
read more about WPF Layouts,
Grid in WPF is similar to Table in HTML, you should do this if you want header and footer.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/> <!--Header-->
<RowDefinition/>
<RowDefinition Height="50"/> <!--Footer-->
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Header"></TextBlock>
<ScrollViewer Grid.Row="1">
<!--your Controls-->
</ScrollViewer>
<TextBlock Grid.Row="2" Text="Footer"></TextBlock>
</Grid>
Try this,
<Grid x:Name="GridName">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Header"/>
<StackPanel Orientation="Vertical" Grid.Row="1">
<!-- Other Controls -->
</StackPanel>
<TextBlock Grid.Row="2" Text="Footer" />
</Grid>