Textblock not getting right aligned

Question

I have the following XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.10*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
    <StackPanel Grid.Row="0" Background="#FFEC850A" Orientation="Horizontal">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
        </Grid>
        <Button x:Name="BtnHashtag" Foreground="White" Content="# Tag" BorderBrush="{x:Null}" Grid.Column="0" FontSize="28" FontFamily="Assets/font/vijaya.ttf#Vijaya" FontWeight="Bold"/>
        <TextBlock x:Name="TxtDate" Foreground="White" Text="Date : 23/11/2014" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="28" FontFamily="Assets/font/vijaya.ttf#Vijaya" FontWeight="Bold" Grid.Column="1" TextAlignment="Right"/>
    </StackPanel>
    <TextBox Background="White" Margin="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" AcceptsReturn="True"/>
</Grid>

And this is how it looks:

I want two texts inside the stackpanel. First is for # tag and another one is for date. How to define it in such a way that #tag occupies half width of stackpanel and date occupies the other half. Also both texts (# tag and date) should appear in the center of their column. ie It should appear like this:

Also I want to place a divider such as | between both columns. How to do that ?

Answer 1

You don't need StackPanel in this layout. You can remove it altogether and keep just Grid , split columns equally and put each element in its cell

<Grid Grid.Row="0" Background="#FFEC850A">
   <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
   </Grid.ColumnDefinitions>
   <Button Grid.Column="0" x:Name="BtnHashtag" Foreground="White" Content="# Tag" BorderBrush="{x:Null}" Grid.Column="0" FontSize="28" FontFamily="Assets/font/vijaya.ttf#Vijaya" FontWeight="Bold"/>
   <TextBlock Grid.Column="1" x:Name="TxtDate" Foreground="White" Text="Date : 23/11/2014" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="28" FontFamily="Assets/font/vijaya.ttf#Vijaya" FontWeight="Bold" Grid.Column="1" TextAlignment="Right"/>
</Grid>

Horizontal StackPanel will ignore HorizontalAlignment of its children and will left align them