Hello people, I am losing my patience with this. I am working on a Windows Phone 7 application and I can't figure out what layout manager to use to achieve
the following:
Basically, when I use a Grid as
the layout root, I can't make
the grid to stretch to
the size of
the phone application page. When
the main content area is full, all is well and
the button sits where I want it to sit. However, in case
the page content is very short,
the grid is only as wide as to accommodate its content and then
the button (which I am desperate to keep near
the right edge of
the screen) moves away from
the right edge.
If I replace
the grid and use a vertically oriented stack panel for
the layout root,
the button sits where I want it but then
the content area is capable of growing beyond
the bottom edge. So, when I place a listbox full of items into
the main content area, it doesn't adjust its height to be completely in view, but
the majority of items in that listbox are just rendered below
the bottom edge of
the display area.
I have tried using a third-party DockPanel layout manager and then docked
the button in it's top section and set
the button's HorizontalAlignment="Right" but
the result was
the same as with
the grid, it also shrinks in size when there isn't enough content in
the content area (or when title is short).
How do I do this then?
==EDIT==
I tried WPCoder's XAML, only I replaced
the dummy text box with what I would have in a real page (stackpanel) and placed a listbox into
the ContentPanel grid. I noticed that what I had before and what WPCoder is suggesting is very similar. Here's my current XAML and
the page still doesn't grow to fit
the width of
the page and I get identical results to what I had before:
<phone:PhoneApplicationPage
x:Name="categoriesPage"
x:Class="CatalogueBrowser.CategoriesPage"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
xmlns:ctrls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.
Controls.Toolkit"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
<TextBlock Text="Browsing:"
Margin="10,10"
Style="{StaticResource PhoneTextTitle3Style}" />
<TextBlock x:Name="ListTitle"
Text="{Binding DisplayName}"
Margin="0,10"
Style="{StaticResource PhoneTextTitle3Style}" />
</StackPanel>
<Button Grid.Column="1"
x:Name="btnRefineSearch"
Content="Refine Search"
Style="{StaticResource buttonBarStyle}"
FontSize="14" />
</Grid>
<Grid x:Name="ContentPanel" Grid.Row="1">
<ListBox x:Name="CategoryList"
ItemsSource="{Binding Categories}"
Style="{StaticResource CatalogueList}"
SelectionChanged="CategoryList_SelectionChanged"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
This is what
the page with
the above XAML markup looks like in
the emulator:
