Z Index of expander

4 posts, 1 answers
  1. Nitin
    Nitin avatar
    6 posts
    Member since:
    Apr 2013

    Posted 10 May 2013 Link to this post

    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>
                                               <RowDefinition></RowDefinition>
                                               <RowDefinition></RowDefinition>
                                               <RowDefinition></RowDefinition>
                                               <RowDefinition></RowDefinition>
                                           </Grid.RowDefinitions>
                                           <Grid.ColumnDefinitions>
                                               <ColumnDefinition></ColumnDefinition>
                                               <ColumnDefinition></ColumnDefinition>
                                               <ColumnDefinition></ColumnDefinition>
                                               <ColumnDefinition></ColumnDefinition>
                                               <ColumnDefinition></ColumnDefinition>
                                               <ColumnDefinition></ColumnDefinition>
                                               <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
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 14 May 2013 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Nitin
    Nitin avatar
    6 posts
    Member since:
    Apr 2013

    Posted 15 May 2013 Link to this post

    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>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <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>
                                        <RowDefinition></RowDefinition>
                                        <RowDefinition></RowDefinition>
                                        <RowDefinition></RowDefinition>
                                        <RowDefinition></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <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}"  Style="{StaticResource radioStyle}"  Click="RadioButton_Click"  ></RadioButton>
                                    <RadioButton Grid.Row="4" Grid.Column="2" Content="20Y" Margin="4" IsChecked="{Binding Path=CurrentTimeFrameOption, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Yearly_20Y}"  Style="{StaticResource radioStyle}"  Click="RadioButton_Click"  ></RadioButton>
                                    <RadioButton Grid.Row="4" Grid.Column="3" Content="25Y" Margin="4" IsChecked="{Binding Path=CurrentTimeFrameOption, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Yearly_25Y}"  Style="{StaticResource radioStyle}"  Click="RadioButton_Click"  ></RadioButton>
                                    <RadioButton Grid.Row="4" Grid.Column="4" Content="30Y" Margin="4" IsChecked="{Binding Path=CurrentTimeFrameOption, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Yearly_30Y}"  Style="{StaticResource radioStyle}"  Click="RadioButton_Click"  ></RadioButton>
                                    <RadioButton Grid.Row="4" Grid.Column="5" Content="40Y" Margin="4" IsChecked="{Binding Path=CurrentTimeFrameOption, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Yearly_40Y}"  Style="{StaticResource radioStyle}"  Click="RadioButton_Click"  ></RadioButton>
                                    <RadioButton Grid.Row="4" Grid.Column="6" Content="50Y" Margin="4" IsChecked="{Binding Path=CurrentTimeFrameOption, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Yearly_50Y}"  Style="{StaticResource radioStyle}"  Click="RadioButton_Click"  ></RadioButton>
                                </Grid>
                            </StackPanel>
                        </telerik:RadExpander.Content>
                    </telerik:RadExpander>
                </Canvas>
            </Grid>
        </Grid>
         
    </telerik:RadWindow>
  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 18 May 2013 Link to this post

    Hello Nitin,

    As far as I understand your issue is that some part of the content of the RadExpander is not visible. This issue is caused by the fact that there is not enough free space for the content to be visualized, hence it is trimmed. Keep in mind that you control the layout of our controls. In order to visualize the content you can change the  Width of the RadWindow so that there will be enough free space for the content of the RadExpander to be visualized. Furthermore, you can change the orientation of the table displayed as content. For your convenience I changed your XAML so that the content will be fully visible. Please take a look at the attached file and let me know if it fits your needs.

    On the other hand the RadColorPicker is rendered on top of the RadWindow because it uses a pop-up to visualize its content, rather than a Grid (like the RadExpander).

    I am not sure how you use the RadWindow and how you visualize it. This is why it is recommended to check how we use the control in this article.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top