CODEWITHSUNDEEP
layoutwindows-phone-8.1
Andrew Simpson
Andrew Simpson

Reputation: 7314

Setting column width to 50% of available width in windows phone 8.1

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:

enter image description here

So far I have this:

enter image description here

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>

Upvotes: 0

Views: 1277

Answers (1)

Romasz
Romasz

Reputation: 29792

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>

Upvotes: 5

Related Questions