Reputation: 37632
Please help me to edit XAML so the TextBlock
which shows minutes goes to the right top corner.
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" >
<TextBlock Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >@</TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
</StackPanel>
</StackPanel>
So it should be like
Upvotes: 0
Views: 2732
Reputation: 5439
I would use a DockPanel. For the child nodes, just add DockPanel.Dock attributes to indicate where you want the element to go. The last child element will automatically fill the remaining area.
<DockPanel>
<TextBlock DockPanel.Dock="Right" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
<StackPanel Orientation="Horizontal" >
<TextBlock Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >@</TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
</StackPanel>
</DockPanel>
Upvotes: 5
Reputation: 2368
If I were doing this I would use a grid rather than a horizontal stack panel:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >@</TextBlock>
<TextBlock Grid.Column="2" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
<TextBlock Grid.Column="4" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
</Grid>
Note the * in the column 3 which means that column will use all available space after column 2, except for what is needed by column 4.
Upvotes: 4