I've got a Grid where I've created three rows using column definition. In the first row I've placed a grid with a rectangle and set the Rowspan = 2. In the second I've also got a grid with a rectangle. Instead of the first row just overlapping the second a bit, which is what I wish, They totally overlap, and seems that there is just one row.
Te RowDefinition Height I've set to Auto, because I wish to change the Heights of the rows by clicking a button later on.
Is there a way to avoid the two rows to merge using the Auto Height for RowDefinition?
The Code I've got so far is:
<Page
x:Class="GridRetreatTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GridRetreatTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="100" Grid.RowSpan="2">
<Rectangle Fill="Blue"/>
</Grid>
<Grid Grid.Row="1" Height="100">
<Rectangle Fill="Red"/>
</Grid>
<Grid Grid.Row="2" Height="100">
<Rectangle Fill="Green"/>
</Grid>
</Grid>
try this:
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="100" >
<Rectangle Fill="Blue"/>
</Grid>
<Grid x:Name="grd1" Grid.Row="1" Height="100" Margin="0,-50,0,0">
<Rectangle Fill="Red"/>
</Grid>
<Grid Grid.Row="2" Height="100">
<Rectangle Fill="Green"/>
</Grid>
</Grid>
<StackPanel Grid.Row="4">
<Button Content="click" Click="Button_Click"></Button>
</StackPanel>
CS:
private void Button_Click(object sender, RoutedEventArgs e)
{
grd1.Margin = new Thickness(0, 0, 0, 0);
grd1.Height = 300;
}
Related
Below is the code snippet:-
In Below code I am Using two web view control and binding the HTML content by using custom property. Here I want that Web-view content should be displayed without any scroll and automatically fit to grid according to content size.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<ResourceDictionary>
<CollectionViewSource x:Name="HtmlSource"/>
</ResourceDictionary>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Background="#fffff0">
<TextBox x:Name="TxtHtmlInput" Width="800" TextWrapping="Wrap" HorizontalAlignment="Left" Height="250"></TextBox>
<Button Margin="10,0,0,0" x:Name="COnvert" HorizontalAlignment="Center" Content='HTML TO TEXT' Tapped="COnvert_Tapped"></Button>
</StackPanel>
<WebView Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="customWebView" webViewer:MyExtensions.HTML="{Binding Source={StaticResource HtmlSource}, Path=HTML}">
</WebView>
<Grid Height="Auto" Grid.Row="2" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<WebView Height="Auto" Width="Auto" x:Name="customWebView1" webViewer:MyExtensions.HTML="{Binding Source={StaticResource HtmlSource}, Path=HTML}"></WebView>
</Grid>
</Grid>
I am working on Windows Phone 8.1 app (Windows Runtime)and I have created a page with the following layout :
<Grid Grid.Row="1" Margin="0, 10, 0, 5" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<maps:MapControl x:Name="LocationMap" Grid.Row="0" Height="220"
MapServiceToken="..."/>
<Hub Grid.Row="1" Margin="0, 25, 0, 0">
<HubSection Header="ABOUT" x:Name="AboutHubSection">
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ShortDescriptionPanel" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" local:TextBlockExtension.FormattedText="{Binding ShortDescription}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Text="Show more" Visibility="{Binding IsDescriptionTooLong, Converter={StaticResource BoolToVisibilityConverter}}" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowMoreTapped"/>
</Grid>
<Grid x:Name="FullDescriptionPanel" Grid.Row="1"
Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Text="Show less" Visibility="Visible" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowLessTapped"/>
</Grid>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="RSVP" x:Name="RsvpHubSection" Margin="0, 0, 0, 50">
<DataTemplate>
<ScrollViewer>
<TextBlock FontSize="16" TextWrapping="Wrap"
Text="{Binding RSVP}"/>
</ScrollViewer>
</DataTemplate>
</HubSection>
<HubSection Header="Statistics" x:Name="StatisticsHubSection" Margin="0, 0, 0, 50">
<DataTemplate>
<ScrollViewer>
<TextBlock FontSize="16" TextWrapping="Wrap"
Text="{Binding Stats}"/>
</ScrollViewer>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
So the content of the page consists of a map control which takes 220 units of Height and the rest should be a Hub with three sections. The HubSections should have their content available for VerticalScrolling if it is the case.
In my particular case, the AboutHubSection should have its content vertically scrollable. The two panels (Short and Full Descriptions) are displayed/hidden one at a time to simulate a "Show more" link which expands the initial short description with a full description of the item. Unfortunately, when the full description is shown, the area does not become scrollable. The textblock that might contain scrollable content is
<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
in the FullDescriptionPanel Grid. I've tried to wrap with a scrollviewer and it didn't work and I'm unsure of what else to try.
Any ideas? Thanks in advance.
You need to set a height limit for your rows.
In your first grid, you should set the second row to Height="*" so your hub control will not be able to expand indefinitively. Since you have used Auto for the two rows, they will each take as much space as needed to fit their content. Using star for the second row will force it to no be bigger than the remaining space.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
You will have then to do the same for your "full description" view to restrict the space for the long text.
<Grid x:Name="FullDescriptionPanel" Grid.Row="1" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
</ScrollViewer>
<TextBlock Grid.Row="1" Text="Show less" Visibility="Visible" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowLessTapped"/>
</Grid>
I have the following XAML:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
Right now the grid is at the center of the screen, I wabt it to be a little bit higher, I can do it with margin, but I don't want any propery with pixel in my page. Is there any other wahy to do it?
Thanks.
The easiest way to get your grid slightly above the centre without using Margins would be to put it in another Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</Grid>
Note the second RowDefinition
<RowDefinition Height="1.2*"/>
This means the second row will take slightly more of the available space than the first row and you can adjust to meet your needs.
I do not understand why textbox is not in the label extension.
What did I do wrong?
This is the code:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label>Text here:</Label>
<TextBox></TextBox>
</StackPanel>
</Grid>
I've got the following XAML:-
<Grid Width="400" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListBox Grid.Row="1" ItemsSource="{Binding Foo}"
Margin="0,12,0,12" />
<Button Grid.Row="2" Content="Button"
VerticalAlignment="Top" HorizontalAlignment="Left" />
</Grid>
This simply displays a heading, a listbox, and a button immediately below the listbox. As the number of items in the listbox grows, the button gets pushed down, however the listbox will keep growing and eventually disappear off the bottom of the window, taking the button with it.
Instead, I would like the listbox to grow until the button hits the bottom of the window. At this point the listbox shouldn't grow any further, and instead display scrollbars to scroll the list. What am I missing?
Edit:
I've just come up with the following, which seems to do the trick. Not sure if there is a more elegant solution though?
<Grid Width="400" Height="400">
<Grid.RowDefinitions >
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<DockPanel Grid.Row="1" LastChildFill="True" VerticalAlignment="Top">
<Button DockPanel.Dock="Bottom" Content="Button"
VerticalAlignment="Top" HorizontalAlignment="Left" />
<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="0,12,0,12">
<ListBox ItemsSource="{Binding Foo}" />
</ScrollViewer>
</DockPanel>
</Grid>
You need to limit the height of the grid row containing your ListBox to some fixed height to stop it taking up whatever vertical height it likes. I'm away from an IDE to test but you may also need to set the VerticalScrollBarVisibility on the ListBox to Auto.
<Grid Width="400" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListBox Grid.Row="1" ItemsSource="{Binding Foo}"
Margin="0,12,0,12" />
<Button Grid.Row="2" Content="Button"
VerticalAlignment="Top" HorizontalAlignment="Left" />
</Grid>