I want to position a cross button in the top right of my dialog without it affecting the flow of the rest of the dialog, this seems to be rather difficult when commpared to CSS?
This currently aligned the content about 20px from the right hand side because its still in column 0 and column 1 is occupying that space. Ideally all the content would be within a StackPanel with the close button being positioned top right. Failing that I guess it may be possible to make the content span the two columns? How do I fix this?
Here is my current XAML:
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock x:Name="UI_DialogTitle" Style="{StaticResource i2_TitleTextBlock}" Text="{TemplateBinding DialogTitle}" Visibility="{TemplateBinding DialogTitleVisibility}" Margin="0,0,0,10"/>
<ContentPresenter x:Name="TheContentPresenter"/>
</StackPanel>
<Button x:Name="UI_CloseDialog" Style="{StaticResource i2_CloseDialogButton}" Visibility="{TemplateBinding CloseButtonVisibility}" Grid.Column="1" Grid.Row="0"/>
</Grid>
Turns out I needed the ColumnSpan property - this all works now!
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="2">
<TextBlock x:Name="UI_DialogTitle" Style="{StaticResource i2_TitleTextBlock}" Text="{TemplateBinding DialogTitle}" Visibility="{TemplateBinding DialogTitleVisibility}" Margin="0,0,0,10"/>
<ContentPresenter x:Name="TheContentPresenter"/>
</StackPanel>
<Button x:Name="UI_CloseDialog" Style="{StaticResource i2_CloseDialogButton}" Visibility="{TemplateBinding CloseButtonVisibility}" Grid.Column="1" Grid.Row="0"/>
</Grid>
I have done something similar. Check the btnClose and the screenshot.
<Grid x:Name="LayoutRoot" Margin="2">
<Border x:Name="PopupBorder" BorderBrush="SlateGray" BorderThickness="1.5" CornerRadius="12" Visibility="Visible" Opacity="20" Margin="0,0,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#CC4895DE" Offset="0.844"/>
<GradientStop Color="#FF346592" Offset="0.393"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBox Height="26" Style="{StaticResource TextBoxStyle}" Margin="0,0,30,220" Name="txtQuotationNumber" Width="332" />
</Border>
**<Button Margin="0,4,4,0" Click="OKButton_Click" Cursor="Hand" x:Name="btnClose" Style="{StaticResource CloseStyleX}" VerticalAlignment="Top" ToolTipService.ToolTip="Close Popup"/>**
-- Datagrid here
-- COMBOBOX HERE
<TextBox Height="26" Name="txtValue" IsTabStop="True" VerticalAlignment="Top" Margin="178,10,500,0"></TextBox>
<Button Content="Search" Click="btnSearch_Click" Style="{StaticResource ButtonStyle}" Height="26" HorizontalAlignment="Right" Margin="0,10,37,0" Name="btnSearch" VerticalAlignment="Top" Width="104" />
</Grid>
Related
I have a toolbox and want to make fill. But I dont make to this. İt is simple problem, I know that because I tried very hard but it did not.
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="0">
<DockPanel Height="40" HorizontalAlignment="Stretch" Background="#eaeaea" LastChildFill="True">
<StackPanel HorizontalAlignment="Stretch" DockPanel.Dock="Left" Orientation="Vertical">
<Border BorderThickness="1" BorderBrush="#eaeaea" CornerRadius="10" Padding="2" VerticalAlignment="Stretch" >
<Grid Width="auto" HorizontalAlignment="Stretch" >
<Border Name="mask" Background="#eaeaea" CornerRadius="6,0,0,6" HorizontalAlignment="Stretch" />
<StackPanel Height="30" Margin="2,2,2,2" Name="kucukmenu" HorizontalAlignment="Stretch" Width="auto">
<StackPanel.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</StackPanel.OpacityMask>
</StackPanel>
</Grid>
</Border>
</StackPanel>
<StackPanel Height="40" Orientation="Horizontal" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Style="{DynamicResource systembtn}">
<Image Source="images/icons/settings.png" HorizontalAlignment="Right"/>
</Button>
<Button Style="{DynamicResource systembtn}">
<Image Source="images/icons/minimize.png" HorizontalAlignment="Right" />
</Button>
<Button Style="{DynamicResource systembtn}">
<Image Source="images/icons/cancel.png" HorizontalAlignment="Right"/>
</Button>
</StackPanel>
</DockPanel>
</StackPanel>
Now it looks like this
I want to this
You can simply use Grid with ColumnDefinitions
Width="*" means fills as much as area an item can, this is for your blue area
Width="Auto" means only fills area an item need so this is for your buttons
You can find more information by searching xaml grid
<Grid Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Width="100">
<StackPanel HorizontalAlignment="Stretch" DockPanel.Dock="Left" Orientation="Vertical">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" />
<SkewTransform CenterY="0.5" CenterX="0.5" />
<RotateTransform Angle="90" CenterY="0.5" CenterX="0.5" />
<TranslateTransform />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFBFC5E2" Offset="0" />
<GradientStop Color="#FF123CF5" Offset="1" />
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</DockPanel>
<Button Grid.Column="1" Content="btn 1" />
<Button Grid.Column="2" Content="btn 2" />
<Button Grid.Column="3" Content="btn 3" />
</Grid>
If you need more complex things to do, you can use this package https://github.com/sourcechord/GridExtra
In a windows store project i have a page that creates several big squares, with this format
<DataTemplate x:Key="MyMeetingsWithMapSquares">
<Grid Width="350" Height="290" DataContext="{Binding}" >
<StackPanel >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0,1" >
<GradientStop Color="#FF0072C6" Offset="0"/>
<GradientStop Color="#FF008FD4" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
<Grid DataContext="{Binding}">
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="150"/>
</Grid.RowDefinitions>
<Border BorderBrush="#0166a0" BorderThickness="0,0,0,1" Margin="10,0,10,0">
<StackPanel Grid.Row="0">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="0" Margin="0,16,0,0" Text="{Binding MyMeetingSquareDayNumber}" Width="40" FontFamily="Segoe UI Semibold" FontSize="33" FontWeight="SemiBold" VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Margin="0,16,0,0" Text="{Binding MyMeetingSquareMonthText}" Width="60" FontFamily="Segoe UI Regular" FontSize="33" FontWeight="Normal" VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Margin="0,16,0,0" Text="{Binding MyMeetingSquareYearText}" Width="60" FontFamily="Segoe UI Light" FontSize="33" FontWeight="Light" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</StackPanel>
<TextBlock Grid.Row="1" Margin="0,5,0,0" Text="Business meeting" FontFamily="Segoe UI Semibold" FontSize="24" FontWeight="SemiBold" VerticalAlignment="Center"/>
</Grid>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="{Binding MyMeetingSquareDayHour}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/>
</StackPanel>
</Grid>
</StackPanel>
</Border>
<Border Grid.Row="1" BorderBrush="#0166a0" BorderThickness="0,0,0,1" Margin="10,0,10,0">
<StackPanel >
<TextBlock Text="{Binding MyMeetingSquareSummary}" FontFamily="Segoe UI Light" FontSize="16" Margin="0,10,0,10" TextWrapping="Wrap"/>
</StackPanel>
</Border>
<StackPanel Grid.Row="2">
<Border BorderBrush="#0166a0" BorderThickness="0,0,0,1" Margin="10,0,10,0">
<ScrollViewer VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden" HorizontalScrollMode="Enabled">
<GridView ItemContainerStyle="{StaticResource GridViewItemStyle2}" ItemsSource="{Binding MyMeetingsSquareUsers}" ItemTemplateSelector="{StaticResource meetingSelector}" Grid.Row="1" Margin="0,10,0,0" SelectionMode="None" HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</ScrollViewer>
</Border>
</StackPanel>
<StackPanel Grid.Row="3" Height="150" DataContext="{Binding}" Background="Red">
<Grid Tapped="Map_DoubleTappedOverride">
<StackPanel Height="55" Width="190" Canvas.ZIndex="11" Margin="10,0,0,60" VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Vertical">
<StackPanel.Background>
<ImageBrush Stretch="Uniform" ImageSource="ms-appx:///Images/Meetings/meetingAddress.png"/>
</StackPanel.Background>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Width="175" Margin="5,0,0,0" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center" >
<TextBlock Text="{Binding Address}" Margin="10,0,0,0" FontFamily="Segoe UI Semilight" FontSize="14" Foreground="Black" Width="170" TextWrapping="WrapWholeWords" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ScrollViewer>
</StackPanel>
<Maps:Map x:Name="miniMap" Tag="{Binding MyMeetingSquareLat}" Loaded="Map_Loaded" DataContext="{Binding}" ZoomLevel="15" Margin="0,10,0,0" ShowBreadcrumb="False" Height="150" ShowNavigationBar="False" ShowScaleBar="False" ShowTraffic="True" ShowBuildings="True" Width="350" Credentials="AnZKLHgAfKSwa5BAB2Kr-g8KENJBm1US3tVieyOxxxxxxxJZVXyUgRIwM" >
<Maps:Map.Children>
<Maps:Pushpin Foreground="{x:Null}">
<Maps:Pushpin.RenderTransform>
<CompositeTransform />
</Maps:Pushpin.RenderTransform>
<Maps:Pushpin.Background>
<ImageBrush Stretch="Fill" ImageSource="ms-appx:///Images/Meetings/meetingsPushpin.png"/>
</Maps:Pushpin.Background>
<Maps:MapLayer.Position>
<Maps:Location Latitude="{Binding MyMeetingSquareLat}" Longitude="{Binding MyMeetingSquareLng}" />
</Maps:MapLayer.Position>
</Maps:Pushpin>
</Maps:Map.Children>
</Maps:Map>
</Grid>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
My problem was that i was having performance issues, mainly some high memory usage. If i removed the Map part from my template the memory usage would drop to 1/4.
My question is if Bing maps has some sort of thumb preview or how can i replace my map with a image of the pushpin location on the map. Having a bunch of map controls on same page seems to affect performance.
Yes, its called the Bing Maps REST Static Imagery Service: https://msdn.microsoft.com/en-us/library/ff701724.aspx
I have this DataTemplate that contains a Map
<DataTemplate x:Key="MyMeetingsWithMapSquares">
<Grid Width="350" Height="290" DataContext="{Binding}" >
<StackPanel >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0,1" >
<GradientStop Color="#FF0072C6" Offset="0"/>
<GradientStop Color="#FF008FD4" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
<Grid DataContext="{Binding}">
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="150"/>
</Grid.RowDefinitions>
<Border BorderBrush="#0166a0" BorderThickness="0,0,0,1" Margin="10,0,10,0">
<StackPanel Grid.Row="0">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Row="0" Margin="0,16,0,0" Text="{Binding MyMeetingSquareDayNumber}" Width="40" FontFamily="Segoe UI Semibold" FontSize="33" FontWeight="SemiBold" VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Margin="0,16,0,0" Text="{Binding MyMeetingSquareMonthText}" Width="60" FontFamily="Segoe UI Regular" FontSize="33" FontWeight="Normal" VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Margin="0,16,0,0" Text="{Binding MyMeetingSquareYearText}" Width="60" FontFamily="Segoe UI Light" FontSize="33" FontWeight="Light" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</StackPanel>
<TextBlock Grid.Row="1" Margin="0,5,0,0" Text="Business meeting" FontFamily="Segoe UI Semibold" FontSize="24" FontWeight="SemiBold" VerticalAlignment="Center"/>
</Grid>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="{Binding MyMeetingSquareDayHour}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/>
</StackPanel>
</Grid>
</StackPanel>
</Border>
<Border Grid.Row="1" BorderBrush="#0166a0" BorderThickness="0,0,0,1" Margin="10,0,10,0">
<StackPanel >
<TextBlock Text="{Binding MyMeetingSquareSummary}" FontFamily="Segoe UI Light" FontSize="16" Margin="0,10,0,10" TextWrapping="Wrap"/>
</StackPanel>
</Border>
<StackPanel Grid.Row="2">
<Border BorderBrush="#0166a0" BorderThickness="0,0,0,1" Margin="10,0,10,0">
<ScrollViewer VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden" HorizontalScrollMode="Enabled">
<GridView ItemContainerStyle="{StaticResource GridViewItemStyle2}" ItemsSource="{Binding MyMeetingsSquareUsers}" ItemTemplateSelector="{StaticResource meetingSelector}" Grid.Row="1" Margin="0,10,0,0" SelectionMode="None" HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</ScrollViewer>
</Border>
</StackPanel>
<StackPanel Grid.Row="3" Height="150" DataContext="{Binding}">
<Maps:Map Tag="{Binding MyMeetingSquareLat}" Margin="0,10,0,0" DoubleTappedOverride="Map_DoubleTappedOverride" ShowBreadcrumb="False" Height="150" ShowNavigationBar="False" ShowScaleBar="False" ShowTraffic="False" Width="350" Credentials="AnZKLHgAfKSwa5BAB2Kr-g8KENJBm1US3txxxxxxzCDUAgxhgJZVXyUgRIwM" ViewChanged="Map_ViewChanged" >
<Maps:Map.Center>
<Maps:Location Latitude="{Binding MyMeetingSquareLat}" Longitude="{Binding MyMeetingSquareLng}"/>
</Maps:Map.Center>
</Maps:Map>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
Im trying to bind values to its latitude and longitude, but for some reason they are allways 0. i tried binding one of the values to the Map tag and it worked, the tag was 49.597378 but the latitude was 0.
how do i pass the values to the map lat and lng ?
EDIT
so i've changed some things on my code and added a pushpin
<StackPanel Grid.Row="3" Height="150" DataContext="{Binding}">
<Maps:Map Tag="{Binding MyMeetingSquareLat}" DataContext="{Binding}" ZoomLevel="5" Margin="0,10,0,0" DoubleTappedOverride="Map_DoubleTappedOverride" ShowBreadcrumb="False" Height="150" ShowNavigationBar="False" ShowScaleBar="False" ShowTraffic="False" Width="350" Credentials="AnZKLHgAfKSwa5BAB2Kr-g8KENJBmxxxxxxyOCEwbJzCDUAgxhgJZVXyUgRIwM" ViewChanged="Map_ViewChanged" >
<Maps:Map.Center>
<Maps:Location Latitude="{Binding MyMeetingSquareLat}" Longitude="{Binding MyMeetingSquareLng}"/>
</Maps:Map.Center>
<Maps:Map.Children>
<Maps:Pushpin >
<Maps:Pushpin.Background>
<ImageBrush Stretch="Fill" ImageSource="ms-appx:///Assets/Pdf/edit.png"/>
</Maps:Pushpin.Background>
<Maps:MapLayer.Position>
<Maps:Location Latitude="{Binding MyMeetingSquareLat}" Longitude="{Binding MyMeetingSquareLng}" />
</Maps:MapLayer.Position>
</Maps:Pushpin>
</Maps:Map.Children>
</Maps:Map>
</StackPanel>
</Grid>
</StackPanel>
The pushpins appear in the correct position, but the map center continues to go to point 0 0 , it doesnt read the binded values for some reason.
You are binding a string (as you said in the comments) to the Latitude property of Maps:Location. However Maps:Location expects a double for this value.
You need to convert this value into a double with the following code:
Double.Parse(myStringValue);
If the value MyMeetingSquareLat can't be changed to a string itself, then add another property like this, and bind to it instead:
public Double MyMeetingSquareLatDouble
{
get
{
return Double.Parse(this.MyMeetingSquareLat);
}
}
In my existing application, I have used navigation.
For that, I have one main window and different pages inside that to be loaded in a frame element.
Here, when the number of controls increase in the page; I want a scroll bar in the page. But currently it appears for the window.Also, in my current code there are 3 columns in SplitGrid - a grid.
I want that first column to be 25% and third column to be 75% width of the available screen area. Is it possible here?
Parent Window :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock FontSize="24" HorizontalAlignment="Center" Text="Ribbon - (Main Menu + Sub Menu)" FontWeight="Bold"/>
<Button Content="Test Button" Click="Button_Click" Width="100" Height="50" HorizontalContentAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
Grid.Row="1">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Name="SplitGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="350" ></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border BorderBrush="#DEB887" BorderThickness="2" CornerRadius="10" Grid.Column="0" HorizontalAlignment="Stretch">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#306EFF" Offset="0.9" />
<GradientStop Color="#BDEDFF" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Vertical">
<Border BorderThickness="2" CornerRadius="8" Margin="5,15,5,10" x:Name="InnerBorder">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#F0FFFF" Offset="0.9" />
<GradientStop Color="#EBF4FA" />
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<StackPanel Orientation="Vertical" Margin="0,0,0,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Frame NavigationUIVisibility="Automatic" Name="frmContent" Source="MainPage.xaml" />
</StackPanel>
</ScrollViewer>
</Border>
</StackPanel>
</Border>
<GridSplitter Grid.Column="1" Name="grdSplitter" Background="#3976FF" HorizontalAlignment="Center" VerticalAlignment="Stretch" ShowsPreview="True" Visibility="Visible" Width="5" />
<StackPanel Background="Blue" Grid.Column="2"></StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</Grid>
MainPage
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<WrapPanel MinWidth="150" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}" HorizontalAlignment="Stretch">
<Button Width="200" Height="50" Content="Button 1"/>
.....
<Button Width="180" Height="50" Content="Button 20"/>
</WrapPanel>
</ScrollViewer>
In the ScrollViewer change VerticalScrollBarVisibility="Visible"
How would I make mainGrid horizontally stretch to the size of the listbox? I've got the listbox set to stretch and auto width and mainGrid set to stretch and auto but its not stretching to the size of the listbox.
<DataTemplate x:Key="AccountItem">
<Grid Name="mainGrid" ShowGridLines="True">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFF3"/>
<GradientStop Color="DarkGray" Offset="0.672"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top" Grid.Row="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="accountName" TextWrapping="Wrap" Text="{Binding Name}" HorizontalAlignment="Left" Foreground="White"/>
<TextBlock x:Name="accountType" TextWrapping="Wrap" Text="{Binding Type}" Foreground="White" HorizontalAlignment="Right" Grid.Column="1"/>
</Grid>
<Grid VerticalAlignment="Center" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Balance:" HorizontalAlignment="Left" Foreground="White"/>
<TextBlock x:Name="accountBalance" TextWrapping="Wrap" Text="{Binding Balance}" HorizontalAlignment="Right" Foreground="White" Grid.Column="1"/>
</Grid>
<Grid VerticalAlignment="Bottom" Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Available Balance:" HorizontalAlignment="Left" Foreground="White"/>
<TextBlock x:Name="accountAvailableBalance" TextWrapping="Wrap" Text="{Binding AvailableBalance}" HorizontalAlignment="Right" Foreground="White" Grid.Column="1"/>
</Grid>
</Grid>
</DataTemplate>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/background.png"/>
</Grid.Background>
<ListBox x:Name="accountsList" Margin="20,136,20,0" ItemTemplate="{StaticResource AccountItem}" />
</Grid>
Try to set HorizontalContentAlignment to Strecth:
<ListBox x:Name="accountsList" Margin="20,136,20,0" ItemTemplate="{StaticResource AccountItem}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>