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

Z Index of expander

3 Answers 345 Views

Expander

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

Nitin asked on 10 May 2013, 06:41 AM

Expander-Z-Index.png

desired-Layout.JPG

Hi

I am facing a problem. I want expander on top of every control means wants to set Z Index of expander to max value.

Also I am not able to set the width of expander, it is not showing all the controls. Please find the code and see the attached Image for more understanding.

I am using RadExpander inside RadWindow and not able to see entire content of RadExpander. (see in image)

Also I am attaching one more image with desired functionality. When I click on th Expander, It should open on the left side as in the image "desired layout.jpg".

Please have a look and provide me some solution with an example.

<Grid x:Name="LayoutRoot" Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="0" Margin="5">

<Canvas Panel.ZIndex="99">

<telerik:RadExpander x:Name="radExpander" IsExpanded="False" VerticalContentAlignment="Top"

telerik:AnimationManager.IsAnimationEnabled="True" Canvas.ZIndex="1" Background="Transparent">

<telerik:RadExpander.Header>

<TextBlock x:Name="expanderCaption" Text="Header" />

</telerik:RadExpander.Header>

<telerik:RadExpander.Content>

<Border BorderBrush="Black" BorderThickness="1" Canvas.ZIndex="1" >

<Grid Background="Cornsilk">

<Grid.BitmapEffect>

<DropShadowBitmapEffect />

</Grid.BitmapEffect>

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0">Daily</TextBlock>

<RadioButton Grid.Row="0" Grid.Column="1" Content="90D" ></RadioButton>

<RadioButton Grid.Row="0" Grid.Column="2" Content="6M" ></RadioButton>

<RadioButton Grid.Row="0" Grid.Column="3" Content="1Y" ></RadioButton>

<RadioButton Grid.Row="0" Grid.Column="4" Content="2Y" ></RadioButton>

<RadioButton Grid.Row="0" Grid.Column="5" Content="3Y" ></RadioButton>

<RadioButton Grid.Row="0" Grid.Column="6" Content="5Y" ></RadioButton>

<TextBlock Grid.Row="2" Grid.Column="0">Monthly</TextBlock>

<RadioButton Grid.Row="2" Grid.Column="1" Content="5Y" ></RadioButton>

<RadioButton Grid.Row="2" Grid.Column="2" Content="10Y" ></RadioButton>

<RadioButton Grid.Row="2" Grid.Column="3" Content="15Y" ></RadioButton>

<RadioButton Grid.Row="2" Grid.Column="4" Content="20Y" ></RadioButton>

<RadioButton Grid.Row="2" Grid.Column="5" Content="25Y" ></RadioButton>

<RadioButton Grid.Row="2" Grid.Column="6" Content="30Y" ></

RadioButton

</Grid>

</Border>

</telerik:RadExpander.Content>

</telerik:RadExpander>

</Canvas>

</Grid

3 Answers, 1 is accepted

answered on 14 May 2013, 11:55 AM

Expander-WPF.zip

Hi Nitin,

In order to make the Header of the RadExpander control aligned from the Right you have to extract and edit the default content of the control. You can find more information in this article.

For your convenience I extracted and edited the default ControlTemplate in the attached project. To achieve your requirement I set the HorizontalAlignment property of the Grid called "HeaderPanel" to Right. Please note that you have to make sure that there is enough space for the content of the RadExpander to expand. Otherwise the Header and the expand arrow will change their position (like in the attached project).

Furthermore, in order to make the content of the RadExpander visualize over the rest of the controls you have to define the RadExpander in XAML as the last element. By doing this all other controls will be rendered under the RadExpander (and its content respectively).

Please take a look at the attached project and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

answered on 15 May 2013, 07:01 AM

RadExpander-Content-is-not-fully-visible.jpg

Hi,

Thanks for the reply but still my problem is not sorted out.

In my case the RadExpander content is not fully visible on the screen. I am adding code and a screen shot where I have compared the functionality of RadExpander with RadColorPicker.

RadColorPicker is fully visible and overlapping the RadWindow but RadExpander is cut down.

<telerik:RadWindow x:Class="NewStandAlone.ChartInputs"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:common="clr-namespace:NewStandAlone.Common"

xmlns:views="clr-namespace:NewStandAlone"

Header="{Binding ChartName}"

mc:Ignorable="d"

d:DesignHeight="500" d:DesignWidth="500" Height="370" Width="710" ResizeMode="NoResize"

WindowStartupLocation="CenterOwner"

xmlns:System="clr-namespace:System;assembly=mscorlib" >

<telerik:RadWindow.Resources>

<Style x:Key="radioStyle" TargetType="RadioButton">

<Style.Triggers>

<Trigger Property="IsChecked" Value="True">

<Setter Property="FontWeight" Value="Bold"></Setter>

</Trigger>

<Trigger Property="IsChecked" Value="False">

<Setter Property="FontWeight" Value="Normal"></Setter>

</Trigger>

</Style.Triggers>

</Style>

<common:TimeFrameToBooleanConverter x:Key="enumConverter"></common:TimeFrameToBooleanConverter>

<Style x:Key="LinkButton" TargetType="Button">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<TextBlock TextDecorations="Underline">

<ContentPresenter />

</TextBlock>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="Foreground" Value="Blue" />

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="true">

<Setter Property="Foreground" Value="Red" />

</Trigger>

</Style.Triggers>

</Style>

<common:MultiValueConverter x:Key="MultiParamConverter"/>

<Style TargetType="{x:Type telerik:RadColorPicker}" x:Key="telerikcolor">

<Setter Property="Background" Value="DarkKhaki"/>

<Setter Property="BorderBrush" Value="#FFDCDCDC"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Foreground" Value="#FF666666"/>

<Setter Property="FontWeight" Value="Bold"/>

<Setter Property="FontSize" Value="11"/>

<Setter Property="FontFamily" Value="Arial"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="8,7"/>

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Foreground" Value="BlueViolet" />

</Trigger>

</Style.Triggers>

</Style>

<Style TargetType="{x:Type telerik:RadSplitButton}" x:Key="splitBtn">

<Setter Property="Background" Value="DarkKhaki"/>

<Setter Property="BorderBrush" Value="#FFDCDCDC"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Foreground" Value="#FF666666"/>

<Setter Property="FontWeight" Value="Bold"/>

<Setter Property="FontSize" Value="11"/>

<Setter Property="FontFamily" Value="Arial"/>

<Setter Property="HorizontalContentAlignment" Value="Center"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="Padding" Value="8,7"/>

<Style.Triggers>

<Trigger Property="IsMouseOver" Value="True">

<Setter Property="Foreground" Value="BlueViolet" />

</Trigger>

</Style.Triggers>

</Style>

</telerik:RadWindow.Resources>

<Grid>

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

<GroupBox Header="Chart Input Metrix" BorderBrush="Black" Margin="5" Width="655">

<Grid Background="WhiteSmoke" Margin="5" Name="HeaderGrid" HorizontalAlignment="Left" Width="640" >

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition Width="100"></ColumnDefinition>

<ColumnDefinition Width="196"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#FF474747" Margin="5" FontWeight="Bold" >Frequency</TextBlock>

<TextBlock Grid.Row="0" Grid.Column="2" Foreground="#FF474747" Margin="5" HorizontalAlignment="Right" FontWeight="Bold">Time Scale</TextBlock>

<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#FF474747" Margin="5" FontWeight="Bold" >From</TextBlock>

<TextBlock Grid.Row="1" Grid.Column="2" Foreground="#FF474747" Margin="5" HorizontalAlignment="Right" FontWeight="Bold">To</TextBlock>

<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#FF474747" Margin="5" FontWeight="Bold">Currency</TextBlock>

<telerik:RadComboBox Grid.Row="0" Grid.Column="1" x:Name="timescale" Text="Time Scale" Margin="5" ItemsSource="{Binding TimeScale}" SelectedItem="{Binding SelectedTimescale}"

Width="190" Height="28" DisplayMemberPath="Name" SelectedValuePath="Id" Style="{StaticResource telerikcombobox}" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch"></telerik:RadComboBox>

<telerik:RadDatePicker Grid.Row="1" Grid.Column="1" Margin="5" x:Name="startDate" HorizontalAlignment="Left" Width="190" SelectedValue="{Binding ChartStartDate}"></telerik:RadDatePicker>

<telerik:RadDatePicker Grid.Row="1" Grid.Column="3" Margin="5" x:Name="endDate" HorizontalAlignment="Left" Width="185" SelectedValue="{Binding ChartEndDate}" Panel.ZIndex="0"/>

<telerik:RadComboBox Grid.Row="2" Grid.Column="1" x:Name="currencies" Text="Currencies" Width="190" Margin="5" ItemsSource="{Binding Currency}" HorizontalAlignment="Left"

DisplayMemberPath="Name" SelectedValuePath="Id" SelectedItem="{Binding SelectedCurrency}" Style="{StaticResource telerikcombobox}" HorizontalContentAlignment="Stretch" ></telerik:RadComboBox>

<StackPanel Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5" Orientation="Horizontal" HorizontalAlignment="Center">

<Button Width="90" Margin="10" Command="{Binding DrawMulChartCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}}">Draw Chart</Button>

<Button Width="90" Margin="10" Command="{Binding CancelWindowCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}}">Cancel</Button>

</StackPanel>

</Grid>

</GroupBox>

</ScrollViewer>

<Grid x:Name="LayoutRoot" Margin="450,30, 0, 0">

<Canvas>

<telerik:RadExpander x:Name="radExpander" IsExpanded="False" VerticalContentAlignment="Top"

telerik:AnimationManager.IsAnimationEnabled="True" Background="Transparent" Canvas.ZIndex="99" Expanded="radExpander_Expanded"

Collapsed="radExpander_Collapsed" >

<telerik:RadExpander.Header>

<TextBlock x:Name="expanderCaption" Text="{Binding SelectedDateFrame}" />

</telerik:RadExpander.Header>

<telerik:RadExpander.Content>

<StackPanel >

<Grid Background="Cornsilk" Panel.ZIndex="99">

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="4" Grid.Column="0">Yearly</TextBlock>

<RadioButton Grid.Row="4" Grid.Column="1" Content="10Y" Margin="4" IsChecked=

"{Binding Path=CurrentTimeFrameOption, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Yearly_10Y}"