[Solved] Horizontal Alignment not working in Header for Metro theme

[Michael Lilly]

I have a template for the RadPaneHeader that adds a button that should be right justified. In Office Blue it works fine, but in Metro, that button is left justified instead. This is the DataTemplate that works in Office Blue but not in Metro. Any assistance would be great:

<DataTemplate x:Key="AddressHeaderTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <ContentPresenter Grid.Column="0" Content="{Binding}"/>
        <telerik:RadButton Grid.Column="1" x:FieldModifier="private" x:Name="EditAddress" IsBackgroundVisible="False" Activate="EditAddress_OnActivate"  VerticalAlignment="Top" HorizontalAlignment="Right">
            <StackPanel>
                <Image Source="{Binding Path=CurrentTheme.Icons[Edit16], Source={StaticResource WorkspaceThemesManager}}"/>
            </StackPanel>
        </telerik:RadButton>
    </Grid>
</DataTemplate>

[Vladi]

Hello,

We are not aware of such issues in the current version of RadDocking. Setting the mentioned DataTemplate to the HeaderTemplate of a RadPane in both Windows8 and Office_Blue work as expected.

I created and attached a sample project for you using Implicit Styles that shows the expected behavior when setting the HeaderTemplate. Could you try to reproduce the issue in that sample project and send it to us in a support thread in order for us to be able to observe it on our side and see what could be the cause of it.

Regards,
Vladi
Telerik

[Michael Lilly]

I apologize, I said I was using the Header template. That was incorrect, I'm actually using the Title Template.

I can definitely duplicate it with your sample project. All I need to do is remove the Width from the template grid (because 200 gives it a set width, instead of floating), and change "HeaderTemplate" to "TitleTemplate". When I run it, I move the panel out of the doc host to one of the extremes of the screen, and I see the same behavior of the button sitting right beside the text. It floats properly under Office Blue, but is left justified in Windows8. Here is the changed code that gives the results I'm seeing:

<UserControl x:Class="DockingHeaderTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <DataTemplate x:Key="AddressHeaderTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Grid.Column="0" Content="{Binding}" />
                <telerik:RadButton Grid.Column="1"
                                   x:FieldModifier="private"
                                   x:Name="EditAddress"
                                   IsBackgroundVisible="False"
                                   VerticalAlignment="Top"
                                   Activate="EditAddress_OnActivate">
                    <StackPanel>
                            <Image Source="logo.png"/>
                    </StackPanel>
                </telerik:RadButton>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadDocking>
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                        <telerik:RadPane Header="Pane 1" TitleTemplate="{StaticResource AddressHeaderTemplate}"/>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>
    </Grid>
</UserControl>

A workaround would be ideal, since I don't have control over which build of your dlls I can use (handled by higher ups).

Thanks!

[Vladi]

Hello,

Thank you for clearing this out. We managed to observe the issue and a fix for it will be available in either the next internal build or in our next official release of RadDocking.

In the mean while I attached a working example with a workaround to my response. Hope this is helpful.

Regards,
Vladi
Telerik