This is a migrated thread and some comments may be shown as answers.

RadRibbonDropDownButton

1 Answer 331 Views

Buttons

This is a migrated thread and some comments may be shown as answers.

Terje Johansen asked on 11 Aug 2011, 09:35 AM

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...

1 Answer, 1 is accepted

answered on 16 Aug 2011, 02:59 PM

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 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 >>