I am not able to get this working. I have a page to show some info and I have divided it into 6 rows. I want that each row take space as they do now but the latest one (which has a map and an image) takes all left till it fill the space.
This is my xaml:
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:UI="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
x:Class="MyApp.EventMoreInfoNoPhoto"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<StackPanel x:Name="swippingSurface">
<Grid x:Name="LayoutRoot"
HorizontalAlignment="Stretch"
Margin="0,0,0,0"
VerticalAlignment="Stretch"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0"
Grid.ColumnSpan="6"
BorderThickness="0"
BorderBrush="DarkRed">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="DarkRed" Offset="0" />
<GradientStop Color="DarkRed" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="5"
Grid.Column="0"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="6"
Grid.RowSpan="2"
Grid.Column="0"
x:Name="photo_border"
Grid.ColumnSpan="1"
BorderThickness="0"
BorderBrush="Red">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="2" Grid.Column="1"
Grid.ColumnSpan="5"
BorderThickness="0"
Opacity="0.3"
BorderBrush="DarkGray">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="DarkGray" Offset="0" />
<GradientStop Color="DarkGray" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="4" Grid.Column="1"
Grid.ColumnSpan="5"
BorderThickness="0"
Opacity="0.3"
BorderBrush="DarkGray">
<Border.Background>
<LinearGradientBrush EndPoint="1,0" StartPoint="1,1">
<GradientStop Color="DarkGray" Offset="0" />
<GradientStop Color="DarkGray" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Image HorizontalAlignment="Center"
Grid.Row="0"
Grid.Column="4"
Source="/Resources/text_black.png"
VerticalAlignment="Center"
Width="40"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Grid.Row="0"
Grid.Column="5"
Source="/Resources/big_map_white.png"
VerticalAlignment="Center"
Width="40"
Margin="0,0,0,0"/>
<TextBlock Text="Info"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.Column="0"
Margin="0,0,0,0"
Style="{StaticResource PhoneTextNormalStyle}"/>
<Image HorizontalAlignment="Center"
Source="/Resources/label.png"
Height="65"
VerticalAlignment="Center"
Width="69"
Grid.Row="1"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="2"
Source="/Resources/label.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="3"
Source="/Resources/calendar.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="4"
Source="/Resources/calendar.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
Height="65"
Grid.Row="5"
Source="/Resources/comment.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<Image HorizontalAlignment="Center"
x:Name="map_icon"
Height="65"
Grid.Row="6"
Source="/Resources/map_white.png"
VerticalAlignment="Center"
Width="69"
Margin="0,0,0,0"/>
<TextBlock HorizontalAlignment="Left"
x:Name="list_event_topic"
Grid.Column="1"
Margin="0,0,0,0"
TextWrapping="Wrap"
Text=""
Grid.Row="1"
Grid.ColumnSpan="5"/>
<TextBlock HorizontalAlignment="Left"
x:Name="list_event_title"
Grid.Column="1"
Margin="0,0,0,0"
Grid.Row="2"
Grid.ColumnSpan="5"
TextWrapping="Wrap"
Text=""/>
<TextBlock HorizontalAlignment="Left"
x:Name="date_init"
Margin="0,0,0,0" TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="5"/>
<TextBlock HorizontalAlignment="Left"
x:Name="date_end"
Margin="0,0,0,0"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="5"/>
<TextBlock Grid.Column="1"
x:Name="comment_area"
HorizontalAlignment="Left"
Margin="10,10,0,0"
Grid.Row="5"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Grid.ColumnSpan="5"
/>
<Maps:Map x:Name="map_event_detail"
Grid.ColumnSpan="5"
HorizontalAlignment="Stretch"
Margin="0,0,0,0"
Grid.Column="1"
Tap="onTapMap"
Grid.Row="6"
Width="auto"
VerticalAlignment="Stretch"
>
<Maps:Pushpin x:Name="pinEvent"
Background="Green"
BorderBrush="Black"
BorderThickness="1"
Visibility="Collapsed" />
</Maps:Map>
</Grid>
</StackPanel>
</phone:PhoneApplicationPage>
But my problem is that after the map ends, there are some empty space. I have tried using Stretch in VerticalAligment but I can't.
What am I doing wrong here? I am sure it is something stupid.
Related
I have an incredible annoying problem with accordion content template.
It shows perfectly, no problem with databinding or something else, but when i resize the browser window the tabControl inside the detail of the accordion doesn't resize at all.
It seems like the width is fixed but acctually it's not.
When the listbox has to change data because of the databinding, the tabcontrol resize perfectly to the new browser window size. Any suggestions please?
My code is:
<layoutToolkit:Accordion.ContentTemplate>
<DataTemplate>
<!--#Sinergia Wave2-->
<Grid>
<sdk:TabControl Grid.Row="1" Grid.ColumnSpan="4" Loaded="ListBox_Loaded" SizeChanged="ListaDetailControlli_SizeChanged">
<sdk:TabItem Header="Controlli">
<Grid Visibility="{Binding HasItems, Converter={StaticResource ConvertBooleanToVisible}}">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="4" Orientation="Horizontal">
<Grid SizeChanged="Grid_SizeChanged" Background="#FFC1C1C1" Height="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="300" />
<!--Colonna del semaforo -->
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<dataInput:Label Grid.Column="1" FontSize="12" FontWeight="Bold" Content="Controllo" HorizontalAlignment="Left" VerticalAlignment="Center" />
<dataInput:Label Grid.Column="3" FontSize="12" FontWeight="Bold" Content="Dettagli" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</StackPanel>
<ListBox Name="ListaDetailControlli" BorderThickness="0" Grid.Row="1" Grid.ColumnSpan="4" ItemsSource="{Binding ListaControlli}" SelectionMode="Single"
SelectedItem="{Binding SelectedTask, Mode=TwoWay}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="44" />
<ColumnDefinition Width="300*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontSize="10" Margin="2,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextAlignment="Left"
Text="{Binding DescrizioneControllo}" />
<Canvas Grid.Column="1"
Width="22"
Height="22"
Margin="0,0,4,0">
<Image Source="/Image/Traffic-no-light.png"
Width="22"
Height="22"
Margin="0,0,4,0" />
<Ellipse Canvas.Left="7"
Canvas.Top="2"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
<Ellipse Canvas.Left="7"
Canvas.Top="11"
Width="8"
Height="8"
Fill="{Binding ColoreControllo}" />
</Canvas>
<!-- #135162;dv;; Pannello Controlli -->
<TextBlock Grid.Column="2" FontSize="10" Margin="2,0,4,0" TextAlignment="Left" Text="{Binding DettaglioControllo}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="Task" GotFocus="TabTask_GotFocus">
<Grid VerticalAlignment="Stretch">
<Border BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Foreground="Red" FontSize="18" FontWeight="Bold" Text="Non è presente nessun task per il giorno selezionato" TextWrapping="Wrap"
Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisibleNegato}}" />
</Border>
<ScrollViewer BorderThickness="0" Visibility="{Binding Path=HasTask, Converter={StaticResource ConvertBooleanToVisible}}">
<ListBox x:Name="ListaTask" BorderThickness="0" Tag="{Binding ID_SERBATOIO}" MinWidth="250" Margin="-2,-1,-2,0" HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource CheckBoxItemContainerStyleWithStatusDiari}" ItemsSource="{Binding ListaTask}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0">
<StackPanel>
<Border x:Name="BorderDrop" Height="20" Margin="8,0,0,0" Background="Gray" BorderThickness="4" Canvas.ZIndex="-2" CornerRadius="9"
Opacity="0.8" Padding="0" Visibility="Collapsed">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.2" Color="Black" />
<GradientStop Offset="0.8" Color="#FFCDCCCC" />
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<controlsLIB:TaskMultiTemp DataContext="{Binding }" PannelloOspitante="{Binding LayoutOspitante,ElementName=panValidazioneOperatori,
Mode=OneWay}"
TemplateTipo="{Binding TemplateMultiTemp,ElementName=panValidazioneOperatori,Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</DataTemplate>
I'm writing a UWP app and have a page with a full-page grid inside a scrollviewer with two even-width outer columns and two even-width inner columns. The right side of the page is a mirror of the left, and everything is aligned to the similar column on the opposite side. However, when I run my app and decrease the width, after a certain point only the third column shrinks. Before that point, all the columns adjust correctly. I don't have any width or minwidth properties set. If I set a fixed width on my grid, the columns resize to be even. I've tried changing which columns my elements are aligned to on various elements, removing the ScrollViewer, and double- and triple-checking for any min-widths being set anywhere.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Away" FontSize="48" FontWeight="Bold"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
<Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
<RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>
</Grid>
</ScrollViewer>
This is how my page looks in the designer:
OK... it appears to me that the layout is overconstrained - likely due to a lot of Blend arranging (a lot of crazy margins in there). If you want predictable layouts, I would recommend positioning the controls within the bounds of the grid sections that you expect to see them rather than trying to use margins to position them. Basically, which grid section do you want the element (Grid.Row=# Grid.Column=#), how many sections does it span (Grid.RowSpan=# Grid.ColumnSpan=#), which edges to align to (HorizontalAlignment=Left/Right/Center/Stretch VerticalAlignment=Left/Right/Center/Stretch), and how much space do you want from the edges (Margin=# # # #)?
So,
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
Becomes,
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
Additionally, I'm not sure you need the viewboxes, richtextboxes, and paragraphs with runs for what you are doing, but I do not know the entire scope of what you're trying to accomplish.
Try something like the following:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
<Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
<TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />
</Grid>
</ScrollViewer>
I'm learning XAML right now and i want to create simple music player but i have a little problem. If i define second, third... grid, objects in this grid are not visible (only in first grid are visible). Can u help me?
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="53"></RowDefinition>
<RowDefinition Height="75"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Fill="#333333"
HorizontalAlignment="Left"
Height="128"
Grid.RowSpan="2"
VerticalAlignment="Top"
Width="480"
Grid.ColumnSpan="4" />
<Button CommandParameter="alarm"
Click="PlaySound"
VerticalContentAlignment="Center"
Grid.Column="0"
Grid.Row="1"
Content="►"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="20" />
<Button VerticalContentAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Content=" ▌▌"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="15" />
<Button VerticalContentAlignment="Center"
Grid.Column="2"
Grid.Row="1"
Content="■"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="25" />
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="song_name"
VerticalAlignment="Top"
Grid.ColumnSpan="3"
Height="53"
Width="auto"
FontSize="30"
Margin="12,0,0,0" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="53"></RowDefinition>
<RowDefinition Height="75"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Fill="#333333"
HorizontalAlignment="Left"
Height="128"
Grid.RowSpan="2"
VerticalAlignment="Top"
Width="480"
Grid.ColumnSpan="4" />
<Button CommandParameter="alarm"
Click="PlaySound"
VerticalContentAlignment="Center"
Grid.Column="0"
Grid.Row="1"
Content="►"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="20" />
<Button VerticalContentAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Content=" ▌▌"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="15" />
<Button VerticalContentAlignment="Center"
Grid.Column="2"
Grid.Row="1"
Content="■"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="25" />
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="song_name"
VerticalAlignment="Top"
Grid.ColumnSpan="3"
Height="53"
Width="auto"
FontSize="30"
Margin="12,0,0,0" />
</Grid>
</StackPanel>
Screen: http://i.imgur.com/Wry3Zvl.png
You are not being explicit with your grid location assignments.
Where is the Grid.Row and Grid.Column here?
<Rectangle Fill="#333333" HorizontalAlignment="Left" Height="128" Grid.RowSpan="2" VerticalAlignment="Top" Width="480" Grid.ColumnSpan="4"/>
I have this pivot control that will be binded with some data:
[EDIT]
Here is my full xaml, i tried to put the Grid.Row definitions and still not working.
<phone:PhoneApplicationPage x:Class="Horoscopo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--Data context is set to sample data above and LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush Stretch="None"
ImageSource="/Assets/bg.jpg"
AlignmentY="Top"
AlignmentX="Center" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<phone:Pivot>
<phone:Pivot.Title>
<TextBlock Text="virgo"
Style="{StaticResource PhoneTextNormalStyle}"
Foreground="White"></TextBlock>
</phone:Pivot.Title>
<phone:PivotItem >
<phone:PivotItem.Header>
<TextBlock Text="hoje"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#FFE9FF0B"
Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</phone:PivotItem.Header>
<!--ContentPanel contains LongListSelector and LongListSelector ItemTemplate. Place additional content here-->
<ScrollViewer Grid.Row="1"
Margin="12,0,12,0">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<phone:LongListSelector x:Name="MainLongListSelector"
Margin="0,0,-12,0"
ItemsSource="{Binding Items}"
SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextExtraLargeStyle}">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#FFE9FF0B"
Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="txtTexto"
Text="{Binding LineTwo}"
TextWrapping="Wrap"
Margin="12,-6,12,0"
Style="{StaticResource PhoneTextSubtleStyle}"
Foreground="White" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</ScrollViewer>
</phone:PivotItem>
<phone:PivotItem>
<phone:PivotItem.Header>
<TextBlock Text="favorito"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#FFE9FF0B"
Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</phone:PivotItem.Header>
<!--ContentPanel contains LongListSelector and LongListSelector ItemTemplate. Place additional content here-->
<ScrollViewer Grid.Row="1"
Margin="12,0,12,0">
<Grid x:Name="ContentFavoritoPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<phone:LongListSelector x:Name="FavoritoListSelector"
Margin="0,0,-12,0"
ItemsSource="{Binding Favoritos}"
SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextExtraLargeStyle}">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#FFE9FF0B"
Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock x:Name="txtTexto"
Text="{Binding LineTwo}"
TextWrapping="Wrap"
Margin="12,-6,12,0"
Style="{StaticResource PhoneTextSubtleStyle}"
Foreground="White" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</ScrollViewer>
</phone:PivotItem>
</phone:Pivot>
</Grid>
But the scrollviewer dont work, and i dont know why this happens.
I tried the suggestions of this Thread, but it didnt work.
Anybody can help me?
Thanks.
try to add the code below under your Grid ContentPanel :
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Actually, your code works fine as I've tested.
If you need further help, you may need to paste your whole xaml.
I had a similar issue with a ScrollViewer inside a PivotItem. The problem was that the content (a Grid) inside the ScrollViewer was the same height as the PivotItem so there was effectively nothing for the ScrollViewer to scroll. I fixed the problem by making the PivotItem height smaller than the height of the content inside the ScrollViewer.
The problem is due to usage of multiple ScrollViewer; LongListSelector has default scrolling mechanism when items in it exceeds the size of the control, so we dont need to explicitly put a ScrollViewer over LongListSelector.
In your case, there will be two scrollviewers, one from LongListSelector and one which you put explicitly. So scrolling is not happening.
So, Just remove the ScrollViewer from all of your Pivot Items and set the Grid.Row property to the LongListSelector.
Following .aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Vowels.aspx.cs" Inherits="XMLPraktijkOpdrachtJavascript.Vowels" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Vowels</title>
<script type="text/javascript" src="Javascript/Vowels.js"></script>
</head>
<body>
<object id="VowelsPage" width="100%" height="100%" type="application/x-silverlight">
<param name="source" value="Xaml/Vowels.xaml"/>
</object>
</body>
</html>
Uses this xaml file:
http://pastebin.com/1sFX93Bp (it's a bit long to post here)
But my page simply won't load. It says white. If I comment out everything from line 20 however, it does work (ie: the remaining code executes).
What could be the problem, or are there any decent Xaml debuggers out there? Since Visual Studio won't let you put breakpoints in xaml files.
can you please change this
TargetType="{x:Type TextBlock}"
to
TargetType="TextBlock"
and also you need to remove
<Setter Property="Background" Value="#FF3B596E"/>
<Setter Property="Background" Value="#FF3B5940"/>
and change
<Setter Property="FontSize" Value="24px"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="FontSize" Value="14px"/>
to
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontSize" Value="14"/>
The complete xaml script is shown as below,
<?xml version="1.0" encoding="UTF-8"?>
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="OnLoaded">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="600"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="Red"/>
<GradientStop Color="#FF3B596E" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.Resources>
<Style x:Key="TitleText"
TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe Black"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Foreground" Value="MidnightBlue"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="LabelText"
TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe Black"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#FFB3B4C1"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="ValueText"
TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe Black"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="Ivory"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="#93C5E8"/>
<GradientStop Color="#3B596E" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="6" Style="{StaticResource TitleText}">
Vowel Details
</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Style="{StaticResource LabelText}">Strings with frequency > 50</TextBlock>
<Button Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Center"
Content="Sort"
Grid.Column="0"
Grid.Row="4"
Name="btnSort50"/>
<TextBlock Grid.Column="1" Grid.Row="1" Style="{StaticResource ValueText}">128</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" Style="{StaticResource LabelText}">Starting with a Vowel</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="1" Style="{StaticResource ValueText}">51</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="2" Style="{StaticResource ValueText}">12</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="3" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="3" Style="{StaticResource ValueText}">22</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="4" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="4" Style="{StaticResource ValueText}">7</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="5" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="5" Style="{StaticResource ValueText}">7</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="6" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="6" Style="{StaticResource ValueText}">3</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="1" Style="{StaticResource LabelText}">Ending with a Vowel</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="1" Style="{StaticResource ValueText}">52</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="2" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="2" Style="{StaticResource ValueText}">7</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="3" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="3" Style="{StaticResource ValueText}">27</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="4" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="4" Style="{StaticResource ValueText}">5</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="5" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="5" Style="{StaticResource ValueText}">9</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="6" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="6" Style="{StaticResource ValueText}">4</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="7" Style="{StaticResource LabelText}">Strings with frequency > 40</TextBlock>
<Button Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Center"
Content="Sort"
Grid.Column="0"
Grid.Row="10"
Name="btnSort40"/>
<TextBlock Grid.Column="1" Grid.Row="7" Style="{StaticResource ValueText}">182</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="7" Style="{StaticResource LabelText}">Starting with a Vowel</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="7" Style="{StaticResource ValueText}">78</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="8" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="8" Style="{StaticResource ValueText}">15</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="9" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="9" Style="{StaticResource ValueText}">36</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="10" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="10" Style="{StaticResource ValueText}">13</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="11" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="11" Style="{StaticResource ValueText}">10</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="12" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="12" Style="{StaticResource ValueText}">4</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="7" Style="{StaticResource LabelText}">Ending with a Vowel</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="7" Style="{StaticResource ValueText}">75</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="8" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="8" Style="{StaticResource ValueText}">14</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="9" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="9" Style="{StaticResource ValueText}">38</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="10" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="10" Style="{StaticResource ValueText}">8</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="11" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="11" Style="{StaticResource ValueText}">10</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="12" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="12" Style="{StaticResource ValueText}">5</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="13" Style="{StaticResource LabelText}">Strings with frequency > 30</TextBlock>
<Button Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Center"
Content="Sort"
Grid.Column="0"
Grid.Row="16"
Name="btnSort30"/>
<TextBlock Grid.Column="1" Grid.Row="13" Style="{StaticResource ValueText}">247</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="13" Style="{StaticResource LabelText}">Starting with a Vowel</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="13" Style="{StaticResource ValueText}">100</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="14" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="14" Style="{StaticResource ValueText}">18</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="15" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="15" Style="{StaticResource ValueText}">48</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="16" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="16" Style="{StaticResource ValueText}">19</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="17" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="17" Style="{StaticResource ValueText}">11</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="18" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="18" Style="{StaticResource ValueText}">4</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="13" Style="{StaticResource LabelText}">Ending with a Vowel</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="13" Style="{StaticResource ValueText}">103</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="14" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="14" Style="{StaticResource ValueText}">19</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="15" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="15" Style="{StaticResource ValueText}">55</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="16" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="16" Style="{StaticResource ValueText}">10</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="17" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="17" Style="{StaticResource ValueText}">13</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="18" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="18" Style="{StaticResource ValueText}">6</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="19" Style="{StaticResource LabelText}">Strings with frequency > 20</TextBlock>
<Button Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Center"
Content="Sort"
Grid.Column="0"
Grid.Row="22"
Name="btnSort20"/>
<TextBlock Grid.Column="1" Grid.Row="19" Style="{StaticResource ValueText}">392</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="19" Style="{StaticResource LabelText}">Starting with a Vowel</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="19" Style="{StaticResource ValueText}">170</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="20" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="20" Style="{StaticResource ValueText}">34</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="21" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="21" Style="{StaticResource ValueText}">77</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="22" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="22" Style="{StaticResource ValueText}">29</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="23" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="23" Style="{StaticResource ValueText}">21</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="24" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="3" Grid.Row="24" Style="{StaticResource ValueText}">9</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="19" Style="{StaticResource LabelText}">Ending with a Vowel</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="19" Style="{StaticResource ValueText}">161</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="20" Style="{StaticResource LabelText}">a</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="20" Style="{StaticResource ValueText}">27</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="21" Style="{StaticResource LabelText}">e</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="21" Style="{StaticResource ValueText}">81</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="22" Style="{StaticResource LabelText}">i</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="22" Style="{StaticResource ValueText}">24</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="23" Style="{StaticResource LabelText}">o</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="23" Style="{StaticResource ValueText}">20</TextBlock>
<TextBlock Grid.Column="4" Grid.Row="24" Style="{StaticResource LabelText}">u</TextBlock>
<TextBlock Grid.Column="5" Grid.Row="24" Style="{StaticResource ValueText}">9</TextBlock>
</Grid>
</Grid>