Can not adjust the CarouselItem Height

3 posts, 1 answers
  1. David Sandor
    David Sandor avatar
    16 posts
    Member since:
    May 2009

    Posted 04 May 2010 Link to this post

    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. Answer
    Milan
    Admin
    Milan avatar
    1989 posts

    Posted 10 May 2010 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. David Sandor
    David Sandor avatar
    16 posts
    Member since:
    May 2009

    Posted 10 May 2010 Link to this post

    Hey Thanks, that worked!
Back to Top