DropDown Button Content Alignment

2 posts, 0 answers
  1. laxman
    laxman avatar
    9 posts
    Member since:
    Jan 2011

    Posted 21 Jan 2011 Link to this post

    I am not able to align the content of Dropdown to left align. It seems its always center align. I am adding RadGallery to dropdown button.

                            <telerik:RadRibbonDropDownButton x:Name="radRibbondropDownButton2" Text="RadRibbon Gallery">
                                <telerik:RadRibbonDropDownButton.DropDownContent>
                                    <StackPanel x:Name="panel1" Orientation="Vertical">
                                        <telerik:RadGallery ItemsSource="{Binding Templates}"   HorizontalContentAlignment="Left"/>
                                        <telerik:RadContextMenu>
                                            <telerik:RadMenuItem Header="New" />
                                        </telerik:RadContextMenu>
                                    </StackPanel>
                                </telerik:RadRibbonDropDownButton.DropDownContent>

                            </telerik:RadRibbonDropDownButton>

    Thanks,

    Laxman

  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 25 Jan 2011 Link to this post

    Hi laxman,

    As I managed to understand you want to change the alignment of the Items you use in the RadGallery.
    If so, you can edit the style of the RadGalleryItem ( the class that wraps the objects from the Gallery`s ItemsSource) and set it HorizontalContentAlignment like so:
    <UserControl.Resources>
        <ControlTemplate x:Key="RadGalleryControlTemplate1" TargetType="telerikRibbonBar:RadGallery"/>
        <SolidColorBrush x:Key="RadGalleryItemOver_border" Color="#FFFFC92B"/>
        <LinearGradientBrush x:Key="RadGalleryItemOver_background" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="RadGalleryItemOver_Innerborder" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="RadGalleryItemPressed_border" Color="#FFFFC92B"/>
        <LinearGradientBrush x:Key="RadGalleryItemPressed_background" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFCE79F" Offset="1"/>
            <GradientStop Color="#FFFDD3A8"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="RadGalleryItemPressed_Innerborder" Color="#FFFFFFFF"/>
        <Style x:Key="RadGalleryItemStyle1" TargetType="telerikRibbonBar:RadGalleryItem">
            <Setter Property="Padding" Value="2"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Right"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikRibbonBar:RadGalleryItem">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="opacity" Storyboard.TargetName="mouseOverIndicator"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedMouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="opacity" Storyboard.TargetName="mouseOverIndicator"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="opacity" Storyboard.TargetName="SelectedIndicator"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="buttonSurface" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1.5"/>
                            <Border x:Name="mouseOverIndicator" BorderBrush="{StaticResource RadGalleryItemOver_border}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource RadGalleryItemOver_background}" CornerRadius="1.5" Opacity="0">
                                <Border BorderBrush="{StaticResource RadGalleryItemOver_Innerborder}" BorderThickness="1"/>
                            </Border>
                            <Border x:Name="SelectedIndicator" BorderBrush="{StaticResource RadGalleryItemPressed_border}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource RadGalleryItemPressed_background}" CornerRadius="1.5" Opacity="0">
                                <Border BorderBrush="{StaticResource RadGalleryItemPressed_Innerborder}" BorderThickness="1"/>
                            </Border>
                            <Grid>
                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <Image x:Name="Image" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" Source="{TemplateBinding Image}" Stretch="None" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                            </Grid>
                            <Rectangle x:Name="DisabledIndicator" Fill="#99FFFFFF" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    Then , by removing the key of the style, it will apply to the generated RadGalleryItems. Feel free to ask if you need more info or if I had misunderstood you.

    All the best,
    Petar Mladenov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
Back to Top