All the SemanticZoom examples I have look at involve linking to a data source that way on the zoomed out view when you click a category it zooms to the correct location on the zoomed in view.
My problem is I am not displaying data just an interface made of several Grid containing textboxes and textblocks.
I have got the SemanticZoom working visually but when I select a category on the zoom out view it always takes me to the beginning of the zoomed in view.
I know it is doing this because there is no reference in the zoomed out view telling it where to go but I don't know what I have to add for this to work. My XAML is below quite long:
<SemanticZoom Grid.Row="1">
<SemanticZoom.ZoomedInView>
<GridView IsRightTapEnabled="False" IsTapEnabled="False" IsHoldingEnabled="False" SelectionMode="None">
<!-- Length Input Area -->
<Grid Margin="70,0,70,0" Background="#FFBFFFD9" Width="320" Height="545" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks
</Grid>
<!-- Weight Input Area -->
<Grid Margin="0,0,70,0" Background="#FFC7D6FF" Width="320" Height="545">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks </Grid>
<!-- Speed Input Area -->
<Grid Margin="0,0,70,0" Background="#FFF0B2BA" Width="320" Height="545">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks </Grid>
<!-- Area Input Area -->
<Grid Margin="0,0,70,0" Background="#FFFFFBB0" Width="320" Height="545">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks </Grid>
<!-- Volume Input Area -->
<Grid Margin="0,0,70,0" Background="#FFFFD9A2" Width="320" Height="545">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks </Grid>
<!-- Fuel Input Area -->
<Grid Margin="0,0,70,0" Width="320" Height="545" Background="#FFAA9C9B">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks
</Grid>
<!-- Pressure Input Area -->
<Grid Margin="0,0,0,0" Width="320" Background="#FFB9F8FB" Height="545">
<Grid.ColumnDefinitions>
<ColumnDefinition Width ="*"/>
<ColumnDefinition Width ="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
Various Text Boxes and Textblocks
</Grid>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView Margin="100,0,0,0" Height="300" IsRightTapEnabled="False" IsTapEnabled="False" IsHoldingEnabled="False" SelectionMode="None">
<!-- Length Input Area -->
<Grid Margin="0,0,0,0" Background="#FFBFFFD9" Width="150" Height="245" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False">
<TextBlock TextWrapping="Wrap" Text="Length" Style="{StaticResource PageHeaderTextStyle}" Margin="10,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
<!-- Weight Input Area -->
<Grid Margin="0,0,0,0" Background="#FFC7D6FF" Width="150" Height="245">
<TextBlock TextWrapping="Wrap" Text="Weight" Style="{StaticResource PageHeaderTextStyle}" Margin="10,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
<!-- Speed Input Area -->
<Grid Margin="0,0,0,0" Background="#FFF0B2BA" Width="150" Height="245">
<TextBlock TextWrapping="Wrap" Text="Speed" Style="{StaticResource PageHeaderTextStyle}" Margin="10,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
<!-- Area Input Area -->
<Grid Margin="0,0,0,0" Background="#FFFFFBB0" Width="150" Height="245">
<TextBlock TextWrapping="Wrap" Text="Area" Style="{StaticResource PageHeaderTextStyle}" Margin="10,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
<!-- Volume Input Area -->
<Grid Margin="0,0,0,0" Background="#FFFFD9A2" Width="150" Height="245">
<TextBlock TextWrapping="Wrap" Text="Volume" Style="{StaticResource PageHeaderTextStyle}" Margin="10,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
<!-- Fuel Input Area -->
<Grid Margin="0,0,0,0" Width="150" Height="245" Background="#FFAA9C9B">
<TextBlock TextWrapping="Wrap" Text="Fuel" Style="{StaticResource PageHeaderTextStyle}" Margin="10,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
<!-- Pressure Input Area -->
<Grid Margin="0,0,0,0" Width="150" Background="#FFB9F8FB" Height="245">
<TextBlock TextWrapping="Wrap" Text="Pressure" Style="{StaticResource PageHeaderTextStyle}" Margin="8,10,0,0" VerticalAlignment="Top" Grid.ColumnSpan="2" FontSize="40"/>
</Grid>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Related
The yellow part of the screen is wasted. And the space after the image is wasted. How do I shift everything to the left? Both image and text to the left and reduce the gap to the left of both image and text? I have tried to play around with margins but am unable to.
Many thanks
Iyer
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:app01" x:Class="app01.MainPage">
<Grid RowSpacing="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="40" />
<RowDefinition Height="*˙"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Source="activair_logo.jpg" Grid.Row="0"/>
<Label Text="Services" Grid.Row="1" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
<Grid RowSpacing="10" Margin="-100,10,0,0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" ColumnSpacing="-100">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_airfreight.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Grid.Column="1" Text="Air Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="1" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_oceanfreight.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Sea Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="2" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_customs.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Customs" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="3" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_transportation.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Transportation" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="4" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_specialcargo.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Special Cargo" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="5" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_exhibitioncargo.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Exhibition Cargo" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="6" ColumnSpacing="-100">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0">
<Image Source="./aa_relocation.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0" VerticalOptions="Center">
<Label Text="International Relocation" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
</Grid>
<Label Text="Customers" Grid.Row="3" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
</Grid>
</ContentPage>
I had pasted the code earlier - not sure why it did not appear - have managed to do better by using negative margins on the grid. Is this portable across different devices? Is this the right way to do this? I have tried to read up default margins - seems to be 6 in most cases - but in this case seems to be a lot more. Seems like 70px margin as a -60px margin seems to be looking good. What is the right way of doing this so that it renders well across device and screen types and resolutions? I have got to this point.
Now I can't figure out how to get the Customers row in the main grid to keep up with the previous row which is a sub-grid within the main one. I am so super confused. I am able to set the height of the rows under the head "Services" but I don't want to as I want to show a lot of text when the user taps on any of the services. So, the height of that row will be dynamic. I'd therefore want to use Height="*" in that inside grid so that all the rows can be "collapsed" and "expanded" on touch.
How do I get the Row that contains "Customers" to keep aligned just under the Services sub-grid?
Many thanks
Set VerticalOptions="StartAndExpand" in Main Grid
<Grid RowSpacing="0,0,0,20" VerticalOptions="StartAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="40" />
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
I am having a problem in fixing 3 TextBlocks inside a Grid,in a metro App,I used this link enter link description here
but I get always a problem in stretching my TextBlocks inside the Grid
this is my code:
<ListView Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
<ListView.ItemTemplate >
<DataTemplate>
<Grid Margin="0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Margin="0">
<Image Grid.Column="0" Source="images/img1.png" Margin="0,5" Stretch="Fill" Width="80"/>
</Border>
<Grid Grid.Column="1" Margin="5" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="text1" Text="test1" Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text2" Text="test2" Grid.Row="1" HorizontalAlignment="Stretch" ></TextBlock>
<TextBlock x:Name="text3" Text="test3" Grid.Row="2" HorizontalAlignment="Stretch" ></TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
so please I need your help,to fix that
thanks for help
You have to edit style of ListViewItem and set HorizontalAlignment to Stretch
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Developing/learning about WP8.1 for the 1st time.
This question is about layout.
I have 2 buttons.
I want them at the bottom of my screen.
I want each button to take 50% of the available width of the screen.
Similar to this:
So far I have this:
And this is my markup:
<Page
x:Class="Informed.BasicPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Informed"
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 x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0" Grid.ColumnSpan="2">
<Image Name="imgHeader" Grid.Row="0" Source="Images/bannershort.jpg" Stretch="UniformToFill"/>
<TextBlock Text="Log In" Margin="0,-6.5,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
</StackPanel>
<StackPanel Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<TextBox Name="email" Header="Email address"/>
<PasswordBox Name="password" Header="Password"/>
<CheckBox Name="showPassword" Content="Show password"/>
<!-- Content body -->
<TextBlock Name="body" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap">
<TextBlock.Text>
Enter Email Address and Password created.
</TextBlock.Text>
</TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="0" Margin="0,0,0,0" Grid.ColumnSpan="1">
<Button Content="hello" Grid.Column="0" FontFamily="Global User Interface" />
</StackPanel>
<StackPanel Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1">
<Button Content="hello2" Grid.Column="1" FontFamily="Global User Interface" />
</StackPanel>
</Grid>
</Page>
Remove those StackPanels they are not needed. When you want something to take available space use HorizontalAlignment = Stretch:
<Button Content="hello" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
You will also need to make your columns equal width:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
You may also think of adding Margin="20,0,10,0" (first) and Margin="10,0,20,0" (second).
There is no point in putting one control inside panel (except some rare cases). You may also modify your code and put those Buttons inside a Grid then there is no need to make the whole main Grid with two columns:
<Grid Grid.Row="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="hello" Grid.Column="0" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
<Button Content="hello2" Grid.Column="1" HorizontalAlignment="Stretch" FontFamily="Global User Interface" />
</Grid>
Does anyone know how to extend the CustomDialog control from Callisto metro app framework, to add a TitleBackground property?
Effectively, I would like to colour the Background of the row where the Title appears.
Figured it out:
In CustomDialog.cs add:
public Brush TitleBackground
{
get { return (Brush)GetValue(TitleBackgroundProperty); }
set { SetValue(TitleBackgroundProperty, value); }
}
public static readonly DependencyProperty TitleBackgroundProperty =
DependencyProperty.Register("TitleBackground", typeof(Brush), typeof(CustomDialog), null);
And then in Generic.xaml, go to the CustomDialog style and change the Grid definition to:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.Row="0" Fill="{TemplateBinding TitleBackground}"/>
<Button Grid.Column="0" Grid.Row="0" x:Name="PART_BackButton" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,24,0,0" Style="{StaticResource DialogBackButtonStyle}" Command="{TemplateBinding BackButtonCommand}" CommandParameter="{TemplateBinding BackButtonCommandParameter}" Visibility="{TemplateBinding BackButtonVisibility}"/>
<local:DynamicTextBlock Grid.Column="1" Grid.Row="0" Foreground="{TemplateBinding TitleForeground}" x:Name="PART_Title" Text="{TemplateBinding Title}" FontFamily="Segoe UI" FontSize="26.6667" FontWeight="Light" Margin="0,0,0,8" />
<ContentPresenter Grid.Column="1" Grid.Row="1" Margin="0" x:Name="PART_Content" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background, Converter={StaticResource ColorContrast}}" />
In my app I'm displaying some info about users in a listbox. I've got most of the stuff as I want, but the layout is bugging me a bit.
It's made with grids, so that it'll re-size and fit portrait/landscape modes.
However, I cannot get the layout to "fix itself"... let me try and explain with pictures:
As you can see the numbers at the right side isn't aligned to the right edge of the screen. How do I achieve this?
Landscape mode looks almost okay:
Below is some of the XAML:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Picture, Mode=OneWay}" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="73" Height="73">
</Image>
<Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="0" Foreground="#FF3F9AC4" FontSize="28"
HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap">
</TextBlock>
<TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="1"
HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
Style="{StaticResource PhoneTextSmallStyle}">
</TextBlock>
</Grid>
<TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1"
HorizontalAlignment="Right" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap"
FontSize="24">
</TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
You need to set the ItemContainerStyle of your ListBox so it'll stretch the ListBoxItems.
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
You could try a simpler grid:
<Grid HorizontalAlignment="Stretch" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding Picture, Mode=OneWay}" Grid.Column="0" Grid.RowSpan="2"
VerticalAlignment="Center"
HorizontalAlignment="Center" Width="73" Height="73" />
<TextBlock Text="{Binding Mode=OneWay, Path=name}" Grid.Column="1" Foreground="#FF3F9AC4" FontSize="28"
HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap" />
<TextBlock Text="{Binding Mode=OneWay, Path=amount}" Grid.Column="2"
HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="28"
Style="{StaticResource PhoneTextSmallStyle}" />
<TextBlock Text="{Binding Mode=OneWay, Path=description}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
VerticalAlignment="Center" Style="{StaticResource PhoneTextSmallStyle}"
TextWrapping="Wrap" FontSize="24" />
</Grid>