CODEWITHSUNDEEP
.netwpfxamlgrid
Sandeep Bansal
Sandeep Bansal

Reputation: 6394

XAML Grid component placement issue

I'm having a problem with my component placement in a Grid.

atm the output is this:

enter image description here

What I want to do is simply have the components side by side each other like this:

enter image description here

Here's my current code:

<Grid x:Name="Components" Margin="8,8,0,8">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>                  
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="1" Grid.Column="0" Content="{Binding .[Language.timeOptions1], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" Height="23.2"/>
    <TextBox Grid.Row="1" Grid.Column="1" MaxLength="2" x:Name="textTimeHour" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2"/>
    <Label Grid.Row="1" Grid.Column="1" Content=":" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" VerticalAlignment="Top"/>
    <TextBox Grid.Row="1" Grid.Column="2" MaxLength="1" x:Name="textTimeMin" TextWrapping="NoWrap" VerticalAlignment="Top" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2" HorizontalAlignment="Left" Width="Auto"/>
    <Button Width="80" Grid.Row="1" Grid.Column="2" x:Name="btnNow" Content="{Binding .[Language.now], Mode=OneWay, Source={StaticResource localisation}}" VerticalAlignment="Top" Style="{DynamicResource style1Btn}" Height="25.2" FontSize="9.333" Click="btnNow_Click"/>
    <TextBlock Grid.Row="2" Grid.Column="0" x:Name="blockIgnoreDate" Text="{Binding .[Language.timeOptions2], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" Height="23.202"/>
    <Custom:DatePicker  Grid.Row="2" Grid.Column="1" x:Name="pickerDate" d:LayoutOverrides="Width" FontFamily="Myriad Pro" IsTodayHighlighted="False" Foreground="#FF585858" Height="24" />
    <CheckBox Grid.Row="2" Grid.Column="2" x:Name="checkIgnoreDate" Content="{Binding .[Language.ignoreDate], Mode=OneWay, Source={StaticResource localisation}}" Foreground="#FF585858" Background="{x:Null}" Checked="checkIgnoreDate_Checked" Unchecked="checkIgnoreDate_Unchecked" Height="15.96"/>
    <Button Grid.Row="3" Grid.Column="0" x:Name="btnAddTask" Content="{Binding .[Language.addTask], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{DynamicResource style1Btn}" Click="btnAddTask_Click" Height="24.65"/>
</Grid>

Can someone point me in the right direction?

Upvotes: 1

Views: 391

Answers (2)

ChrisF
ChrisF

Reputation: 137148

Put your time controls inside a StackPanel and change the VerticalAlignment of your controls to Center:

<Label Grid.Row="1" Grid.Column="0" Content="{Binding .[Language.timeOptions1],
       Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left"
       VerticalAlignment="Center" FontSize="11" Foreground="#FF585858"
       FontFamily="Myriad Pro" Height="23.2"/>
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
    <TextBox MaxLength="2" x:Name="textTimeHour" TextWrapping="NoWrap"
             VerticalAlignment="Center" HorizontalAlignment="Left"
             FontFamily="Myriad Pro" Style="{DynamicResource style1Text}"
             Height="25.2"/>
    <Label Content=":" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858"
           FontFamily="Myriad Pro" VerticalAlignment="Center"/>
    <TextBox MaxLength="1" x:Name="textTimeMin" TextWrapping="NoWrap"
             VerticalAlignment="Top" FontFamily="Myriad Pro"
             Style="{DynamicResource style1Text}" Height="25.2"
             HorizontalAlignment="Left" Width="Auto"/>
    <Button Width="80" x:Name="btnNow" Content="{Binding .[Language.now], Mode=OneWay,
           Source={StaticResource localisation}}" VerticalAlignment="Center"
           Style="{DynamicResource style1Btn}" Height="25.2" FontSize="9.333"
           Click="btnNow_Click"/>
</StackPanel>

You may also want to add a margin to the CheckBox or set it's HorizontalAlignment to Center as well.

Upvotes: 1

akjoshi
akjoshi

Reputation: 15772

Change the Grid.Column of your textTimeMin text box and btnNow to 1 and set Grid.ColumnSpan="2" on your textTimeHour, textTimeMin, : label and btnNow -

<Label Grid.Row="1" Grid.Column="0" Content="{Binding .[Language.timeOptions1], Mode=OneWay, Source={StaticResource localisation}}" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" Height="23.2"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" MaxLength="2" x:Name="textTimeHour" TextWrapping="NoWrap" VerticalAlignment="Top" HorizontalAlignment="Left" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Content=":" HorizontalAlignment="Left" FontSize="11" Foreground="#FF585858" FontFamily="Myriad Pro" VerticalAlignment="Top"/>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" MaxLength="1" x:Name="textTimeMin" TextWrapping="NoWrap" VerticalAlignment="Top" FontFamily="Myriad Pro" Style="{DynamicResource style1Text}" Height="25.2" HorizontalAlignment="Left" Width="Auto"/>
<Button Width="80" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" x:Name="btnNow" Content="{Binding .[Language.now], Mode=OneWay, Source={StaticResource localisation}}" VerticalAlignment="Top" Style="{DynamicResource style1Btn}" Height="25.2" FontSize="9.333" Click="btnNow_Click"/>

I can't test it right now but you need to use Grid.Column and Grid.ColumnSpan correctly to achieve what you want.

Upvotes: 0

Related Questions