[Solved] Horizontal Content Alignment

[JC]

Hello,

I work with the 2011 Q1 release.
The HorizontalContentAlignment not longer seems to work ?

I do this small code for you :

<telerik:RadExpander Margin="0,32,0,0" VerticalAlignment="Top" IsExpanded="True">
    <telerik:RadExpander.Header>
        <TextBlock Text="Coordonnées" FontSize="14" FontWeight="Bold" />
    </telerik:RadExpander.Header>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <StackPanel Margin="20,0">
            <TextBlock Text="Coordonnées" FontWeight="Bold" HorizontalAlignment="Center" FontSize="12" />
        </StackPanel>
        <StackPanel Margin="10,0,20,0" Grid.Column="1">
            <TextBlock Text="Adresse siège" FontWeight="Bold" HorizontalAlignment="Center" FontSize="12" />
        </StackPanel>
        <StackPanel Grid.Column="2" Margin="10,0,20,0">
            <TextBlock Text="Coordonnées bancaires" FontWeight="Bold" HorizontalAlignment="Center" FontSize="12" />
        </StackPanel>
    </Grid>
</telerik:RadExpander>

The Grid doesn't use all available space.
So, I looked at the template I found 2 colums ??

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
        Background="{TemplateBinding Background}">
    <Grid>
        <!-- WHY 2 columns ?
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <telerik:RadToggleButton x:Name="HeaderButton" Background="Transparent" ClickMode="{TemplateBinding ClickMode}"
                       FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}"
                      FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}"
                       FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Left"
                       IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                       Template="{StaticResource ToggleTemplate}" VerticalAlignment="Top">
            <StackPanel x:Name="HeaderPanel" Orientation="Horizontal">
                <Grid>
                    <Ellipse x:Name="OuterCircle" Fill="{StaticResource ControlBackground_Normal}" HorizontalAlignment="Center"
                             Height="20" Stroke="{StaticResource ControlOuterBorder_Normal}" VerticalAlignment="Center" Width="20"/>
                    <Ellipse x:Name="InnerCircle" HorizontalAlignment="Center" Height="18" Stroke="{StaticResource ControlInnerBorder_Normal}"
                             VerticalAlignment="Center" Width="18"/>
                    <Grid x:Name="arrowPanel" RenderTransformOrigin=".5 .5">
                        <Grid.RenderTransform>
                            <RotateTransform/>
                        </Grid.RenderTransform>
                        <Path x:Name="arrow" Data="M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z" Fill="{StaticResource ControlElement_Normal}"
                              Height="4" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">
                            <Path.RenderTransform>
                                <RotateTransform Angle="0"/>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                </Grid>
                <telerik:LayoutTransformControl x:Name="HeaderContentTransform" RenderTransformOrigin=".5 .5">
                    <ContentPresenter x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"
                                      Grid.Column="1" HorizontalAlignment="Stretch" Margin="5 0" VerticalAlignment="Center"/>
                </telerik:LayoutTransformControl>
            </StackPanel>
        </telerik:RadToggleButton>
        <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Grid>
</Border>

When I remove these columns, it work correctly !

What's the correct way to do this ?

Thanks
JC

[Tina Stancheva]

Hello Jc,

Please accept our apologies for the caused inconvenience. During the Q1 2011 the Expander control went under extensive changes. Our goal was to improve the performance of the control and fix many of the bugs. Unfortunately we have introduced issues related to the Alignment properties, which are already fixed . If you update to the latest official release, you will be able to get the latest version of the control where the alignment properties of the RadExpander work as expected and more properties are exposed to allow you to define the layout of the Header as well as the Content of the control. These alignment properties are described here.

In the meantime I attached a sample project where the default style of the Q1 2011 version of the RadExpander is modified to allow stretching. Please give it a try and let us know if it works for you.

Best wishes,
Tina Stancheva
the Telerik team

[JC]

Ok

I updated to 2011.1.0704 and it work fine.

Thx