CODEWITHSUNDEEP
c#wpfxamlbordertextblock
KeyboardFriendly
KeyboardFriendly

Reputation: 1798

Multiple Alignments inside border

I have the below xaml code. I am trying to align the image and the textblock to the right. The first textblock is displaying correctly, I just want the image and 2nd textblock to dock to the far right. How can I allign this correctly?

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderThickness="0" Padding="16,2"
        BorderBrush="Transparent" Background="{StaticResource AccentBrush}">
    <DockPanel LastChildFill="True">                
            <ItemsControl ItemsSource="{Binding Lists}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="0,5" FontSize="24" FontFamily="Sageo UI Light" TextAlignment="Left" TextWrapping="NoWrap"
                           TextTrimming="WordEllipsis" Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" Text="{Binding Title}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
          <StackPanel Orientation="Horizontal" >
            <Image HorizontalAlignment="Right" Source="/Images/image.png"/>
            <TextBlock DockPanel.Dock="Right" Margin="16,0,0,0" Text="{Binding ElementName=TreeView, Path=SelectedItem.Name, StringFormat='Name: {0}'}"
                   FontFamily="Segoe UI Light" FontSize="14" TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                   Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Center" />               
        </StackPanel>                
    </DockPanel>
</Border>

Upvotes: 0

Views: 234

Answers (1)

John Bowen
John Bowen

Reputation: 24453

The internal size of a StackPanel is unbounded in the direction of its Orientation and always stacks items from the top/left. The combination of these two properties mean that you can't use a StackPanel to get the right alignment that you're looking for. Instead you can use another DockPanel instead, or just place everything directly in the outer DockPanel. I can't tell from your code which order you want the right docked items in but this should at least get you started:

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderThickness="0" Padding="16,2"
        BorderBrush="Transparent" Background="{StaticResource AccentBrush}">
    <DockPanel LastChildFill="False">                
            <ItemsControl ItemsSource="{Binding Lists}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Margin="0,5" FontSize="24" FontFamily="Sageo UI Light" TextAlignment="Left" TextWrapping="NoWrap"
                           TextTrimming="WordEllipsis" Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" Text="{Binding Title}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
          <DockPanel DockPanel.Dock="Right">
            <Image Source="/Images/image.png"/>
            <TextBlock Margin="16,0,0,0" Text="{Binding ElementName=TreeView, Path=SelectedItem.Name, StringFormat='Name: {0}'}"
                   FontFamily="Segoe UI Light" FontSize="14" TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                   Foreground="{StaticResource MainBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Center" />               
        </DockPanel>                
    </DockPanel>
</Border>

Upvotes: 1

Related Questions