Can not adjust the CarouselItem Height

[David Sandor]

Hi,

I have a carousel on a WPF page and it seems the Height of the CarouselItem does not allow me to set it above about 300 pixels.  See my attached screen shot A and B. 

I am setting the CarouselItem template using the following XAML:

<Style TargetType="{x:Type telerik:CarouselItem}">

<Style.Resources>

<loc:StaleTagValueConverter x:Key="TagStateConverter" />

</Style.Resources>

<Setter Property="Width" Value="400" />

<Setter Property="Template" >

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:CarouselItem}" >

<Border BorderBrush="Black" BorderThickness="1"  VerticalAlignment="Stretch"  CornerRadius="8" d:IsHidden="False">

<Border.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF38A4DE" Offset="1"/>

<GradientStop Color="#FFC4E9F8"/>

</LinearGradientBrush>

</Border.Background>

<Grid Margin="7" d:IsHidden="False">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.415*"/>

<ColumnDefinition Width="0.585*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="0.768*"/>

<RowDefinition Height="0.232*"/>

</Grid.RowDefinitions>

<Border BorderThickness="1" Margin="0,0,0,8" Background="White" CornerRadius="0,0,3,3" Grid.ColumnSpan="2" d:IsHidden="False">

<Grid Margin="7" d:IsHidden="False">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.542*"/>

<ColumnDefinition Width="0.458*"/>

</Grid.ColumnDefinitions>

<Image Margin="8,7,4,8" Source="/Styles/Resources/circuit.jpg" Stretch="Fill" d:IsHidden="False"/>

<StackPanel Grid.Column="1" Margin="8,4,0,4" d:IsHidden="False">

<TextBlock Height="45" Margin="0" Style="{DynamicResource BasicTextBlock-Normal}" Foreground="Black" d:IsHidden="False"><Run Foreground="Gray" Text="Bin Location"/><LineBreak/><Run Text="Warehouse 1"/></TextBlock>

<TextBlock Height="45" Margin="0,2,0,0" Style="{DynamicResource BasicTextBlock-Normal}" Foreground="Black" d:IsHidden="False"><Run Foreground="Gray" Text="Item"/><LineBreak/><Run Text="0101-0028"/></TextBlock>

<TextBlock Height="45" Margin="0,2,0,0" Style="{DynamicResource BasicTextBlock-Normal}" Foreground="Black" d:IsHidden="False"><Run Foreground="Gray" Text="Serial"/><LineBreak/><Run Text="BABEFF01"/></TextBlock>

</StackPanel>

</Grid>

</Border>

<Image Margin="4" Grid.Row="1" Source="/Styles/Resources/barcode_black.png" Stretch="Fill" Height="20" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="170" d:IsHidden="False"/>

<TextBlock Margin="8,32,8,8" Grid.Row="1" Style="{DynamicResource BasicTextBlock-Normal}" Text="E2000900002005011523602991" Foreground="Black" Grid.ColumnSpan="2" d:LayoutOverrides="HorizontalAlignment" TextAlignment="Center" d:IsHidden="False"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>  Even if I set the Height property with this: <Style TargetType="{x:Type telerik:CarouselItem}"> <Style.Resources> <loc:StaleTagValueConverter x:Key="TagStateConverter" /> </Style.Resources> <Setter Property="Width" Value="400" /> <Setter Property="Height" Value="450" /> <Setter Property="Template" >

And set the main border inside the control template to this:

<Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:CarouselItem}" >

                        <Border BorderBrush="Black" BorderThickness="1"  VerticalAlignment="Stretch"  CornerRadius="8" d:IsHidden="False" Height="400">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF38A4DE" Offset="1"/>

It still clips the content to what appears to be somewhere between 250 and 300 pixels. 

How can I make the content template height larger to fit my content?

Thanks,
David Sandor

[Milan]

Hi David Sandor,

The default style of CarouselItem applies a MaxHeight restriction which causes the clipping that you see. Setting MaxHeight to 450, for instance, should resolve the problem.

Sincerely yours,
Milan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[David Sandor]

Hey Thanks, that worked!