GridView Items does not have same height - user-interface

I have a GridView that displays Header and Sub-Items like so:
<GridView ItemsSource="{Binding Path=MainViewModels}">
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border BorderBrush="White" BorderThickness="1"></Border>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="White" BorderThickness="1"></Border>
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
Foreground="#FFAAAAAA"
Style="{StaticResource Style_TextBlock_Label_H3}"
Text="{Binding Path=Description}" VerticalAlignment="Top" />
<GridView Grid.Row="1"
ItemsSource="{Binding Path=SubViewModels}">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0,0,5,0"
Text="{Binding Path=Description}"
TextWrapping="Wrap" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
However, whenever it renders, it renders like this:
What I want to achieve is that all the "Header" are on the top, while the Items themselves extend to the bottom and then just overflow using the WrapGrid.
Can please point out where I am going wrong?
Thank you!

Related

phone:WebBrowser how we can set Auto Height and Width?

<StackPanel Orientation="Vertical">
<TextBlock x:Name="articleDate" Foreground="Black" FontSize="20"
Text="Timefzdsaf" />
<Image x:Name="image" Stretch="Uniform" />
<StackPanel Orientation="Vertical">
<phone:WebBrowser Name="webBrowser1"
IsScriptEnabled="False" Background="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
></phone:WebBrowser>
</StackPanel>
phone:WebBrowser will not show in my page(if am not giving Height and Width i want it should take automatically). can any one help me to show html in phone WebBrowser?
Don't use the StackPanel. Try Grid with RowDefinitions. For WebBrowser set it to "*"
From your code (added Source just to demonstrate):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="articleDate"
Foreground="Black"
FontSize="20"
Text="Timefzdsaf" />
<Image x:Name="image"
Grid.Row="1"
Stretch="Uniform" />
<phone:WebBrowser Name="webBrowser1"
Source="http://msdn.microsoft.com/en-US/"
IsScriptEnabled="False"
Grid.Row="2"
Background="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center">
</phone:WebBrowser>
</Grid>

Error when using <Scrollviewer> xaml

I am trying to use a but am getting the error:
The property 'Content' is set more than once.
It dissappears if I remove any one of the two lines of code in between the tags.
So neither of them seems wrong individually, but both together cause the problem.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="New Trip" Style="{StaticResource PhoneTextNormalStyle}" Height="40" />
<Button Content="Back" Height="71" Name="button1" Width="103" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" HorizontalAlignment="Right" Click="button1_Click" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<TextBlock Height="60" HorizontalAlignment="Left" Margin="65,12,0,0" Name="textBlock1" Text="Username" VerticalAlignment="Top" Width="169" />
<TextBox Height="78" HorizontalAlignment="Left" Margin="60,60,0,0" Name="textBoxUsername" VerticalAlignment="Top" Width="274" />
</ScrollViewer>
</Grid>
</Grid>
ScrollViewer can only have 1 content, so wrap the controls inside the ScrollViewer in a container like Grid, DockPanel, StackPanel
<ScrollViewer>
<StackPanel>
<TextBlock Height="60" HorizontalAlignment="Left" Margin="65,12,0,0" Name="textBlock1" Text="Username" VerticalAlignment="Top" Width="169" />
<TextBox Height="78" HorizontalAlignment="Left" Margin="60,60,0,0" Name="textBoxUsername" VerticalAlignment="Top" Width="274" />
</StackPanel>
</ScrollViewer>
Put your <TextBlock> and <TextBox> within another container, such as a StackPanel.

navigation in itemtemplate with querystring wp7

I have a ListBox.ItemTemplate in ListBox inside wp7 app. What I want is to navigate to somepage when user clicks the title with titletext in querystring.
Currently it just navigates to somepage.
<ListBox x:Name="lbname" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="tbTitle" Grid.Row="0" Text="{Binding Title}" TextAlignment="Left" FontFamily="Segoe WP" Foreground="#000000" Style="{StaticResource PhoneTextTitle1Style}" >
<Custom:Interaction.Triggers>
<Custom:EventTrigger EventName="MouseLeftButtonDown">
<ic:NavigateToPageAction TargetPage="/Views/somePage.xaml"/>
</Custom:EventTrigger>
</Custom:Interaction.Triggers>
</TextBlock>
<TextBlock x:Name="tbDesc" Grid.Row="1" Margin="11,0,0,0" Text="{Binding Desc}" TextAlignment="Left" FontFamily="Segoe WP" Foreground="#000000" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How to do that?
How about setting TargetPage="{Binding Address}"?
I used HyperlinkButton with NavigateUri="{Binding NavigationURL}"

Wrap Panel in ListBox

I have the following XAML code:
<DataTemplate x:Key="FriendsDataTemplate">
<toolkit:WrapPanel Orientation="Horizontal" ItemWidth="173" ItemHeight="233">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</toolkit:WrapPanel>
</DataTemplate>
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}"/>
</Grid>
FriendsList width is 420px.
My problem is: I want two items column, but I see one.
Any advice?
I've found the solution. Here is my working XAML code:
<DataTemplate x:Key="FriendsDataTemplate">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}" Width="420">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="173" ItemHeight="233"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
I've added a ListBox.ItemsPanel inside ListBox definition. And I've moved wrap panel on it.

Align listbox items horizontally

I want to show a listbox with two items for each row.
You can see an example here.
I have the following XAML:
<Grid x:Name="FriendsGrid">
<ListBox x:Name="FriendsList" Margin="0" ItemTemplate="{StaticResource FriendsDataTemplate}"/>
</Grid>
<DataTemplate x:Key="FriendsDataTemplate">
<Grid VerticalAlignment="Top" HorizontalAlignment="Right" Background="{StaticResource PhoneAccentBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="183"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image x:Name="FriendAvatar" Margin="1,1,11,11" Source="{Binding ImageURL}" Width="173" Height="173"/>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top">
<TextBlock x:Name="FriendName" Margin="0" Text="{Binding FriendName}" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,10,0" TextAlignment="Right"/>
</Grid>
</Grid>
</DataTemplate>
But I see one ListBoxItem for each row.
How can I do that?
Can you not just use a WrapPanel as the ItemContainerStyle?

Resources