RadRibbonDropDownButton

2 posts, 0 answers
  1. Terje Johansen
    Terje Johansen avatar
    28 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2011 Link to this post

    I have an application menu with a RadRibbonDropDownButton(expands to the right). The content of the RadRibbonDropDownButton are a couple of RadRibbonButtons and then another RadRibbonDropDownButton(also expands to the right). In other words I have a RadRibbonDropDownButton within another RadRibbonDropDownButton.

    This somehow makes the small arrow on the inner RadRibbonDropDownButton("direction arrow") to point downwards. I have tried to set the DropDownPlacement="Right" and the DropDownButtonPosition="Right" but still the direction arrow is pointing downwards... Shouldn't the the direction arrow be pointing right? Is this somehow a bug caused by the fact that I'm having one RadRibbonDropDownButton within another RadRibbonDropDownButton?
    (I have also tried to replace the inner RadRibbonDropDownButton with a RadDropDownButton)

    The "direction arrow" on the outer RadRibbonDropDownButton is correctly pointing to the right...

  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 16 Aug 2011 Link to this post

    Hi Terje Johansen,

    This is an issue in the RadRibbonDropDown button. If you move the buttons out of the ApplicationMenu both controls' DropDownIndicators will point down. However, since the ApplicationMenu defines styles for its children , including for the RadRibbonDropDown buttons, the first button's DropDownIndicator is pointing right. I logged this issue in our PITS where you can track its progress. I also updated your Telerik points for your report.

    In the meantime you can define the following style for both buttons thus making sure the DropDownIndocator will point to Right:

    <Style TargetType="{x:Type telerik:RadRibbonDropDownButton}">
        <Setter Property="Padding" Value="5" />
        <Setter Property="BorderThickness" Value="1.5" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Size" Value="Large" />
        <Setter Property="AutoOpenDelay" Value="0:0:0.3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadRibbonDropDownButton}">
                    <Grid SnapsToDevicePixels="True">
                        <Border x:Name="buttonSurface" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1">
                            <Border x:Name="buttonSurfaceInner" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" />
                        </Border>
                        <Border x:Name="isOpenIndicator" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Visibility="Collapsed">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFDDCF9B" Offset="0" />
                                    <GradientStop Color="#FFC6AF7E" Offset="0.4" />
                                    <GradientStop Color="#FFC4AD7C" Offset="0.4" />
                                    <GradientStop Color="#FFE1D8BD" Offset="1" />
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFFEFDE2" Offset="0" />
                                    <GradientStop Color="#FFFFDC78" Offset="0.4" />
                                    <GradientStop Color="#FFFFD664" Offset="0.4" />
                                    <GradientStop Color="#FFFEEAAE" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <Border BorderThickness="{TemplateBinding BorderThickness}">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFFFFF7" Offset="0" />
                                        <GradientStop Color="#FFFFF9A8" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                            </Border>
                        </Border>
                        <Border x:Name="mouseOverIndicator" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" />
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="22" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Grid.ColumnSpan="3" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            <Image x:Name="Image" />
                            <TextBlock x:Name="textRow1" Grid.Column="1" Margin="4,0,1,0" TextAlignment="Left" Text="{TemplateBinding Text}" VerticalAlignment="Center" />
                            <Border x:Name="DropDownPanel" Grid.Column="2" VerticalAlignment="Stretch">
                                <Path x:Name="DropDownIndicator" Data="M0,0L3.5,3.5 0,7" Fill="Black" HorizontalAlignment="Center" Margin="2,0,0,0" Stroke="#FFEAF2F9" Visibility="{TemplateBinding DropDownIndicatorVisibility}" VerticalAlignment="Center" />
                            </Border>
                        </Grid>
                        <Popup x:Name="DropDownPopup" AllowsTransparency="True" Focusable="False" HorizontalOffset="2" IsOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" StaysOpen="False" VerticalOffset="-1">
                            <Grid>
                                <Border x:Name="DropDownPopupBorder" BorderBrush="#FF868686" BorderThickness="1" Background="#FFFAFAFA" Height="{TemplateBinding DropDownHeight}" MinWidth="3" MinHeight="3" Width="{TemplateBinding DropDownWidth}">
                                    <ContentControl x:Name="DropDownPopupContent" Content="{TemplateBinding DropDownContent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                                </Border>
                            </Grid>
                        </Popup>
                        <Rectangle x:Name="DisabledIndicator" Fill="#99FFFFFF" Visibility="Collapsed" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="buttonSurface">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFDDCF9B" Offset="0" />
                                        <GradientStop Color="#FFC6AF7E" Offset="0.4" />
                                        <GradientStop Color="#FFC4AD7C" Offset="0.4" />
                                        <GradientStop Color="#FFE1D8BD" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Background" TargetName="buttonSurface">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFEFDE2" Offset="0" />
                                        <GradientStop Color="#FFFFDC78" Offset="0.4" />
                                        <GradientStop Color="#FFFFD664" Offset="0.4" />
                                        <GradientStop Color="#FFFEEAAE" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" TargetName="buttonSurfaceInner">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFFFFF7" Offset="0" />
                                        <GradientStop Color="#FFFFF9A8" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="BorderBrush" TargetName="buttonSurface">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFDDCF9B" Offset="0" />
                                        <GradientStop Color="#FFC6AF7E" Offset="0.4" />
                                        <GradientStop Color="#FFC4AD7C" Offset="0.4" />
                                        <GradientStop Color="#FFE1D8BD" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Background" TargetName="buttonSurface">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFEFDE2" Offset="0" />
                                        <GradientStop Color="#FFFFDC78" Offset="0.4" />
                                        <GradientStop Color="#FFFFD664" Offset="0.4" />
                                        <GradientStop Color="#FFFEEAAE" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderBrush" TargetName="buttonSurfaceInner">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFFFFF7" Offset="0" />
                                        <GradientStop Color="#FFFFF9A8" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Visibility" TargetName="DisabledIndicator" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsOpen" Value="True">
                            <Setter Property="Visibility" TargetName="isOpenIndicator" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    All the best,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top