Hello, I have a problem with the control RadListBox. I enter the property ScrollViewer.VerticalScrollBarVisibility = "Visible" to the vertical scroll bar appears, but it does not appear in any way. What do I do to solve this problem?
Below is my code :
Below is my code :
<telerik:ListBox Grid.Row="1" Grid.Column="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="0" x:Name="lista" ItemsSource="{Binding Itens}">
<telerik:ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="stretch"/>
</Style>
</telerik:ListBox.Resources>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBoxItem Padding="0" BorderThickness="0" Margin="0">
<telerik:RadExpander>
<telerik:RadExpander.Resources>
<LinearGradientBrush x:Key="Expander_Background" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#479FB3" />
<GradientStop Offset="1" Color="#01839E" />
</LinearGradientBrush>
<SolidColorBrush x:Key="Expander_BorderBrush" Color="#FFCCCCCC" />
<Thickness x:Key="Expander_BorderThickness">0.5</Thickness>
<LinearGradientBrush x:Key="ControlBackground_Normal" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#FFFFFFFF" />
<GradientStop Offset="0.50" Color="#FFDCDCDC" />
<GradientStop Offset="0.50" Color="#FFADADAD" />
<GradientStop Offset="1" Color="#FFD4D4D4" />
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlOuterBorder_Normal" Color="#FF848484" />
<SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000" />
<SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#FFFFC92B" />
<ControlTemplate x:Key="ToggleTemplate" TargetType="telerik:RadToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="Focused" />
<VisualTransition GeneratedDuration="0:0:0.2" To="Unfocused" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0:0:0"
Storyboard.TargetName="FocusDecorator"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle x:Name="FocusDecorator"
IsHitTestVisible="false"
Stroke="{StaticResource ControlOuterBorder_Focused}"
StrokeDashArray="1 2"
StrokeThickness="1"
Visibility="Collapsed" />
</Grid>
</ControlTemplate>
<CornerRadius x:Key="Expander_BorderRadius">3</CornerRadius>
<SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" />
<SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent" />
<SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" />
<SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" />
<SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B" />
<SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF" />
<LinearGradientBrush x:Key="ControlBackground_MouseOver" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#FFFFFBDA" />
<GradientStop Offset="0.50" Color="#FFFEEBAE" />
<GradientStop Offset="0.50" Color="#FFFFD25A" />
<GradientStop Offset="1" Color="#FFFFFBA3" />
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF000000" />
<LinearGradientBrush x:Key="ControlOuterBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF282828" />
<GradientStop Offset="1" Color="#FF5F5F5F" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlInnerBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FFB69A78" />
<GradientStop Offset="0.126" Color="#FFFFE17A" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlBackground_Pressed" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#FFFFDCAB" />
<GradientStop Offset="0.5" Color="#FFFFD18F" />
<GradientStop Offset="0.5" Color="#FFFE9227" />
<GradientStop Offset="0" Color="#FFFFBA74" />
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlElement_Pressed" Color="#FF000000" />
<!-- ExpanderTemplate -->
<ControlTemplate x:Key="ExpanderTemplate" TargetType="telerik:RadExpander">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStateGroup">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="arrow"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.5" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="Content"
Storyboard.TargetProperty="Opacity"
To=".5" />
<DoubleAnimation Storyboard.TargetName="HeaderContent"
Storyboard.TargetProperty="Opacity"
To=".5" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderStateGroup">
<VisualState x:Name="NormalHeader" />
<VisualState x:Name="MouseOverHeader" />
<VisualState x:Name="PressedHeader" />
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderOrientationGroup">
<VisualState x:Name="HorizontalOrientation">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="0" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="VerticalOrientation">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="90" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="arrow"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
To="180" />
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="arrow"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpandDirectionStates">
<VisualStateGroup.Transitions>
<VisualTransition>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="Auto" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="DirectionLeft">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="arrowPanel"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
To="-180" />
</Storyboard>
</VisualState>
<VisualState x:Name="DirectionRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="DirectionUp">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="arrowPanel"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
To="-90" />
</Storyboard>
</VisualState>
<VisualState x:Name="DirectionDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">
<DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="arrowPanel"
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle"
To="90" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource Expander_BorderRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="col0" Width="Auto" />
<ColumnDefinition x:Name="col1" Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="row0" Height="Auto" />
<RowDefinition x:Name="row1" Height="Auto" />
</Grid.RowDefinitions>
<telerik:RadToggleButton x:Name="HeaderButton"
HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}"
VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}"
Background="Transparent"
ClickMode="{TemplateBinding ClickMode}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
IsChecked="{Binding IsExpanded,
Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}"
TabIndex="{TemplateBinding TabIndex}"
Template="{StaticResource ToggleTemplate}">
<Grid x:Name="HeaderPanel" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid x:Name="arrowPanel" RenderTransformOrigin=".5 .5">
<Grid.RenderTransform>
<RotateTransform />
</Grid.RenderTransform>
<Image x:Name="arrow"
Width="16"
Height="16"
RenderTransformOrigin="0.5,0.5"
Source="Expander.png"
Stretch="None">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
</Grid>
</Grid>
<telerik:LayoutTransformControl x:Name="HeaderContentTransform"
Grid.Row="0"
Grid.Column="0"
RenderTransformOrigin=".5 .5">
<ContentPresenter x:Name="HeaderContent"
Grid.Column="1"
Margin="5 0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" />
</telerik:LayoutTransformControl>
</Grid>
</telerik:RadToggleButton>
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Visibility="Collapsed" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
<!-- RadExpander Style -->
<Style TargetType="telerik:RadExpander">
<Setter Property="IsTabStop" Value="false" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="{StaticResource Expander_Background}" />
<Setter Property="BorderBrush" Value="{StaticResource Expander_BorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource Expander_BorderThickness}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template" Value="{StaticResource ExpanderTemplate}" />
<Setter Property="telerik:AnimationManager.AnimationSelector">
<Setter.Value>
<telerik:AnimationSelector>
<telerik:ExpanderExpandCollapseAnimation AnimationName="Expand"
Direction="In"
TargetElementName="Content" />
<telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse"
Direction="Out"
TargetElementName="Content" />
</telerik:AnimationSelector>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="Margin" Value="0"/>
</Style>
</telerik:RadExpander.Resources>
<telerik:RadExpander.Header>
<Grid HorizontalAlignment="Stretch" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="35"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DATA_ATENDIMENTO}" Grid.Column="0" FontSize="8" VerticalAlignment="Center"/>
<TextBlock Text="{Binding HORA_MARCADA}" Grid.Column="1" FontSize="8" VerticalAlignment="Center"/>
<TextBlock Text="{Binding NOME}" Grid.Column="2"/>
</Grid>
</telerik:RadExpander.Header>
<telerik:RadExpander.Content>
<Grid Height="100" Background="White" HorizontalAlignment="Stretch" Margin="0">
<TextBlock Text="{Binding NOME}" Margin="0" Foreground="Black"/>
<TextBlock Text="{Binding NOME}" Margin="0"/>
<TextBlock Text="{Binding NOME}" Margin="0"/>
</Grid>
</telerik:RadExpander.Content>
</telerik:RadExpander>
</ListBoxItem>
</DataTemplate>
</ItemsControl.ItemTemplate>
</telerik:ListBox>
1 Answer, 1 is accepted
0
Lancelot
Top achievements
Rank 1
Rank 1
answered on 04 Jun 2012, 10:01 PM
Hi Gilmar,
I just spent some time with your code and created example data to fit your viewModel exactly so i could work on it. I have found the solution to your issue. First, lets look at your control.
You used ListBox instead of RadListBox, this caused most of your problems. Even though you wont see an error in your XAML and your ItemTemplate will populate, it isn't the right control. So I went replaced your usages with the proper control.
Next I looked into why your scrollBar wouldn't visualize. Now that we have the right control in place, you have the outer boundaries of your listbox stretched all the way to the edges of the UserControl. If your list is not long enough, RadListbox will not create a scrollBar if there is nothing to scroll to... even if you do have it set to "Visible".
Here is the code I've written for you, you can replace your code with it and it will work. The only thing you will need to do is change or remove the "Height" and "Width" properties I hard coded into the RadListBox. They are there to demonstrate that the scrollBar is there and working.
Replace your Listbox code with this code:
If you have any additional questions, please don't hesitate to ask.
Good Luck!
Lancelot
I just spent some time with your code and created example data to fit your viewModel exactly so i could work on it. I have found the solution to your issue. First, lets look at your control.
You used ListBox instead of RadListBox, this caused most of your problems. Even though you wont see an error in your XAML and your ItemTemplate will populate, it isn't the right control. So I went replaced your usages with the proper control.
Next I looked into why your scrollBar wouldn't visualize. Now that we have the right control in place, you have the outer boundaries of your listbox stretched all the way to the edges of the UserControl. If your list is not long enough, RadListbox will not create a scrollBar if there is nothing to scroll to... even if you do have it set to "Visible".
Here is the code I've written for you, you can replace your code with it and it will work. The only thing you will need to do is change or remove the "Height" and "Width" properties I hard coded into the RadListBox. They are there to demonstrate that the scrollBar is there and working.
Replace your Listbox code with this code:
<telerik:RadListBox Grid.Column="0" Margin="8,0,0,0" Background="Black" x:Name="lista" ItemsSource="{Binding Itens}" HorizontalAlignment="Left" Width="297" d:LayoutOverrides="GridBox" VerticalAlignment="Top" Height="214" ScrollViewer.VerticalScrollBarVisibility="Visible" > <telerik:RadListBox.Resources> <Style TargetType="ListBoxItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </telerik:RadListBox.Resources> <ItemsControl.ItemTemplate> <DataTemplate> <ListBoxItem Padding="0" BorderThickness="0" Margin="0"> <telerik:RadExpander> <telerik:RadExpander.Resources> <LinearGradientBrush x:Key="Expander_Background" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="#479FB3" /> <GradientStop Offset="1" Color="#01839E" /> </LinearGradientBrush> <SolidColorBrush x:Key="Expander_BorderBrush" Color="#FFCCCCCC" /> <Thickness x:Key="Expander_BorderThickness">0.5</Thickness> <LinearGradientBrush x:Key="ControlBackground_Normal" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="#FFFFFFFF" /> <GradientStop Offset="0.50" Color="#FFDCDCDC" /> <GradientStop Offset="0.50" Color="#FFADADAD" /> <GradientStop Offset="1" Color="#FFD4D4D4" /> </LinearGradientBrush> <SolidColorBrush x:Key="ControlOuterBorder_Normal" Color="#FF848484" /> <SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000" /> <SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#FFFFC92B" /> <ControlTemplate x:Key="ToggleTemplate" TargetType="telerik:RadToggleButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="FocusStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.2" To="Focused" /> <VisualTransition GeneratedDuration="0:0:0.2" To="Unfocused" /> </VisualStateGroup.Transitions> <VisualState x:Name="Unfocused" /> <VisualState x:Name="Focused"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="FocusDecorator" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter x:Name="Content" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" /> <Rectangle x:Name="FocusDecorator" IsHitTestVisible="false" Stroke="{StaticResource ControlOuterBorder_Focused}" StrokeDashArray="1 2" StrokeThickness="1" Visibility="Collapsed" /> </Grid> </ControlTemplate> <CornerRadius x:Key="Expander_BorderRadius">3</CornerRadius> <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" /> <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent" /> <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" /> <SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D" /> <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B" /> <SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF" /> <LinearGradientBrush x:Key="ControlBackground_MouseOver" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="#FFFFFBDA" /> <GradientStop Offset="0.50" Color="#FFFEEBAE" /> <GradientStop Offset="0.50" Color="#FFFFD25A" /> <GradientStop Offset="1" Color="#FFFFFBA3" /> </LinearGradientBrush> <SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF000000" /> <LinearGradientBrush x:Key="ControlOuterBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#FF282828" /> <GradientStop Offset="1" Color="#FF5F5F5F" /> </LinearGradientBrush> <LinearGradientBrush x:Key="ControlInnerBorder_Pressed" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#FFB69A78" /> <GradientStop Offset="0.126" Color="#FFFFE17A" /> </LinearGradientBrush> <LinearGradientBrush x:Key="ControlBackground_Pressed" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Offset="0" Color="#FFFFDCAB" /> <GradientStop Offset="0.5" Color="#FFFFD18F" /> <GradientStop Offset="0.5" Color="#FFFE9227" /> <GradientStop Offset="0" Color="#FFFFBA74" /> </LinearGradientBrush> <SolidColorBrush x:Key="ControlElement_Pressed" Color="#FF000000" /> <ControlTemplate x:Key="ExpanderTemplate" TargetType="telerik:RadExpander"> <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStateGroup"> <VisualState x:Name="Normal" /> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="arrow" Storyboard.TargetProperty="Opacity"> <DiscreteObjectKeyFrame KeyTime="0" Value="0.5" /> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".5" /> <DoubleAnimation Storyboard.TargetName="HeaderContent" Storyboard.TargetProperty="Opacity" To=".5" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="HeaderStateGroup"> <VisualState x:Name="NormalHeader" /> <VisualState x:Name="MouseOverHeader" /> <VisualState x:Name="PressedHeader" /> </VisualStateGroup> <VisualStateGroup x:Name="HeaderOrientationGroup"> <VisualState x:Name="HorizontalOrientation"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <RotateTransform Angle="0" /> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Column)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="VerticalOrientation"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <RotateTransform Angle="90" /> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Row)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ExpandStateGroup"> <VisualState x:Name="Expanded"> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="180" /> </Storyboard> </VisualState> <VisualState x:Name="Collapsed"> <Storyboard> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="arrow" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="0" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ExpandDirectionStates"> <VisualStateGroup.Transitions> <VisualTransition> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)"> <DiscreteObjectKeyFrame KeyTime="0" Value="0" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)"> <DiscreteObjectKeyFrame KeyTime="0" Value="0" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)"> <DiscreteObjectKeyFrame KeyTime="0" Value="0" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)"> <DiscreteObjectKeyFrame KeyTime="0" Value="0" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height"> <DiscreteObjectKeyFrame KeyTime="0" Value="Auto" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualTransition> </VisualStateGroup.Transitions> <VisualState x:Name="DirectionLeft"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="arrowPanel" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="-180" /> </Storyboard> </VisualState> <VisualState x:Name="DirectionRight"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="DirectionUp"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="arrowPanel" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="-90" /> </Storyboard> </VisualState> <VisualState x:Name="DirectionDown"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height"> <DiscreteObjectKeyFrame KeyTime="0" Value="*" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)"> <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="arrowPanel" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" To="90" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{StaticResource Expander_BorderRadius}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="col0" Width="Auto" /> <ColumnDefinition x:Name="col1" Width="Auto" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition x:Name="row0" Height="Auto" /> <RowDefinition x:Name="row1" Height="Auto" /> </Grid.RowDefinitions> <telerik:RadToggleButton x:Name="HeaderButton" HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}" VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}" VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}" Background="Transparent" ClickMode="{TemplateBinding ClickMode}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" TabIndex="{TemplateBinding TabIndex}" Template="{StaticResource ToggleTemplate}"> <Grid x:Name="HeaderPanel" Background="Transparent"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid Grid.Row="0" Grid.Column="0"> <Grid x:Name="arrowPanel" RenderTransformOrigin=".5 .5"> <Grid.RenderTransform> <RotateTransform /> </Grid.RenderTransform> <Image x:Name="arrow" Width="16" Height="16" RenderTransformOrigin="0.5,0.5" Source="Expander.png" Stretch="None"> <Image.RenderTransform> <RotateTransform Angle="0" /> </Image.RenderTransform> </Image> </Grid> </Grid> <telerik:LayoutTransformControl x:Name="HeaderContentTransform" Grid.Row="0" Grid.Column="0" RenderTransformOrigin=".5 .5"> <ContentPresenter x:Name="HeaderContent" Grid.Column="1" Margin="5 0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" /> </telerik:LayoutTransformControl> </Grid> </telerik:RadToggleButton> <ContentPresenter x:Name="Content" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Visibility="Collapsed" /> </Grid> </Border> </Grid> </ControlTemplate> <Style TargetType="telerik:RadExpander"> <Setter Property="IsTabStop" Value="false" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="Background" Value="{StaticResource Expander_Background}" /> <Setter Property="BorderBrush" Value="{StaticResource Expander_BorderBrush}" /> <Setter Property="BorderThickness" Value="{StaticResource Expander_BorderThickness}" /> <Setter Property="Padding" Value="0" /> <Setter Property="Template" Value="{StaticResource ExpanderTemplate}" /> <Setter Property="telerik:AnimationManager.AnimationSelector"> <Setter.Value> <telerik:AnimationSelector> <telerik:ExpanderExpandCollapseAnimation AnimationName="Expand" Direction="In" TargetElementName="Content" /> <telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse" Direction="Out" TargetElementName="Content" /> </telerik:AnimationSelector> </Setter.Value> </Setter> <Setter Property="Foreground" Value="White"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="FontSize" Value="10"/> <Setter Property="Margin" Value="0"/> </Style> </telerik:RadExpander.Resources> <telerik:RadExpander.Header> <Grid HorizontalAlignment="Stretch" Margin="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="60"/> <ColumnDefinition Width="35"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding DATA_ATENDIMENTO}" Grid.Column="0" FontSize="8" VerticalAlignment="Center"/> <TextBlock Text="{Binding HORA_MARCADA}" Grid.Column="1" FontSize="8" VerticalAlignment="Center"/> <TextBlock Text="{Binding NOME}" Grid.Column="2"/> </Grid> </telerik:RadExpander.Header> <telerik:RadExpander.Content> <Grid Height="100" Background="White" HorizontalAlignment="Stretch" Margin="0"> <TextBlock Text="{Binding NOME}" Margin="0" Foreground="Black"/> <TextBlock Text="{Binding NOME}" Margin="0"/> <TextBlock Text="{Binding NOME}" Margin="0"/> </Grid> </telerik:RadExpander.Content> </telerik:RadExpander> </ListBoxItem> </DataTemplate> </ItemsControl.ItemTemplate> </telerik:RadListBox>If you have any additional questions, please don't hesitate to ask.
Good Luck!
Lancelot