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

Can not adjust the CarouselItem Height

2 Answers 52 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
David Sandor
Top achievements
Rank 1
David Sandor asked on 04 May 2010, 07:09 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Milan
Telerik team
answered on 10 May 2010, 10:13 AM
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.
0
David Sandor
Top achievements
Rank 1
answered on 10 May 2010, 01:48 PM
Hey Thanks, that worked!
Tags
Carousel
Asked by
David Sandor
Top achievements
Rank 1
Answers by
Milan
Telerik team
David Sandor
Top achievements
Rank 1
Share this question
or