CODEWITHSUNDEEP
xamlwindows-phone
peyman gilmour
peyman gilmour

Reputation: 1218

Fixing grid width on windows phone

I was wondering if you guide me , how can i fix the grid width or griditem width on windows phone . actually i am beginner in xaml and windows phone. this my xaml code :

       <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">

        <ListBox x:Name="ListBoxCountry" SelectionChanged="ListBoxCountry_SelectionChanged">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>

                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                <DataTemplate>

                    <Grid Background="#FFD0D2D3" Height="180">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" Source="Assets/images/icon_bubble_white.png" Stretch="None" Margin="-107,0,0,0" />
                        <Image  Grid.Column="0" Source="{Binding Icon}"  Height="50" Width="50" Stretch="Fill"/>
                        <TextBlock Grid.Column="1" TextAlignment="Center"  Text="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" />
                    </Grid>

                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

    </Grid>

And the ugly view of listbox and you can see grid items has no suitable width size . :

enter image description here

Upvotes: 1

Views: 386

Answers (1)

Chris W.
Chris W.

Reputation: 23270

Generally I would expect just slapping on the HorizontalContentAlignment="Stretch" to the ListBox would accomplish it fine, but for whatever reason you say that didn't cut it, so we'll just go tell the ItemContainerStyle who's boss whether it likes it or not.

Bringing us to something more like;

<Grid x:Name="ContentPanel" Grid.Row="1">

   <ListBox x:Name="ListBoxCountry" 
            SelectionChanged="ListBoxCountry_SelectionChanged"
            HorizontalContentAlignment="Stretch">
       <ListBox.ItemContainerStyle>

         <!-- Tell it to do as you wish. 
              Might also use BasedOn if you want to inherit the default stuff with it. -->

         <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
         </Style>

       </ListBox.ItemContainerStyle>
       <ListBox.ItemTemplate>
           <DataTemplate>

               <Grid Background="#FFD0D2D3" Height="180">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="Auto"/>
                       <ColumnDefinition Width="*"/>
                   </Grid.ColumnDefinitions>

                   <Image Source="Assets/images/icon_bubble_white.png" />
                   <Image Source="{Binding Icon}" Height="50" Width="50" Stretch="Fill"/>
                   <TextBlock Grid.Column="1" Text="{Binding Title}" 
                              HorizontalAlignment="Center" VerticalAlignment="Center" 
                              Foreground="White" />

               </Grid>

           </DataTemplate>
       </ListBox.ItemTemplate>
   </ListBox>

</Grid>

Hope this helps, cheers.

Upvotes: 1

Related Questions