RadDataBoundListBoxItem - Stretch Style

2 posts, 0 answers
  1. Michael
    Michael avatar
    2 posts
    Member since:
    Aug 2013

    Posted 06 Dec 2013 Link to this post

    Hi community

    I have a problem using the RadDataBoundListBox control. Everything works fine, exept the style i wish to use =)
    My item should use the whole with of the screen. Now it uses only the width of the content in it.

    Here is my xaml:

    <telerikp:RadDataBoundListBox x:Name="ContentPanel" Grid.Row="1" ItemsSource="{Binding List}" Style="{StaticResource RadDataBoundListBoxStyle}"
                                        SelectionChanged="SelectionChanged">
                <telerikp:RadDataBoundListBox.VirtualizationStrategyDefinition>
                    <telerikp:WrapVirtualizationStrategyDefinition Orientation="Horizontal" />
                </telerikp:RadDataBoundListBox.VirtualizationStrategyDefinition>
                <telerikp:RadDataBoundListBox.ItemContainerStyle>
                    <Style TargetType="telerikp:RadDataBoundListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </telerikp:RadDataBoundListBox.ItemContainerStyle>
                <telerikp:RadDataBoundListBox.ItemTemplate>
                    <DataTemplate>
                        <telerikp:RadDataBoundListBoxItem Style="{StaticResource RadDataBoundListBoxItemStyleWide}">
                            <Grid toolkit:TiltEffect.IsTiltEnabled="True" DataContext="{Binding Model}">
                                <Grid.Background>
                                    <ImageBrush ImageSource="{Binding Picture}"/>
                                </Grid.Background>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
     
                                <!-- Top row -->
                                <StackPanel Grid.Row="0" Grid.Column="1" Style="{StaticResource OpacityStackPanelStyle}">
                                    <TextBlock Text="{Binding Info1}" Visibility="{Binding Info2, Converter={StaticResource VisibilityConverter}}"
                                           Style="{StaticResource OpacityTextblockStyle}" />
                                </StackPanel>
     
                                <!-- Bottom row -->
                                <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
     
                                    <StackPanel Grid.Row="0" Grid.Column="0" Style="{StaticResource OpacityStackPanelStyle}" Margin="0 0 5 0">
                                        <Image Source="/Assets/Icons/appbar.people_d.png" Style="{StaticResource OpacityImageStyle}"/>
                                        <TextBlock Text="{Binding UserCount}" Style="{StaticResource OpacityTextblockStyle}" />
                                    </StackPanel>
                                    <StackPanel Grid.Row="0" Grid.Column="1" Style="{StaticResource OpacityStackPanelStyle}" Margin="0 0 5 0">
                                        <Image Source="/Assets/Icons/appbar.image.multiple_d.png" Style="{StaticResource OpacityImageStyle}" />
                                        <TextBlock Text="{Binding PictureCount}" Style="{StaticResource OpacityTextblockStyle}" />
                                    </StackPanel>
                                    <StackPanel Grid.Row="0" Grid.Column="2" Style="{StaticResource OpacityStackPanelStyle}" Margin="0 0 5 0">
                                        <Image Source="/Assets/Icons/appbar.cloud.upload_d.png" Style="{StaticResource OpacityImageStyle}" Visibility="{Binding ShowValue, Converter={StaticResource VisibilityConverter}}" />
                                        <TextBlock Text="{Binding NewImageCount}" Visibility="{Binding ShowValue, Converter={StaticResource VisibilityConverter}}" Style="{StaticResource OpacityTextblockStyle}" />
                                    </StackPanel>
                                    <StackPanel Grid.Row="0" Grid.Column="4" Style="{StaticResource OpacityStackPanelStyle}" HorizontalAlignment="Right">
                                        <TextBlock Text="{Binding Title}" Style="{StaticResource OpacityTextblockStyle}" TextWrapping="NoWrap" TextTrimming="WordEllipsis" />
                                    </StackPanel>
                                </Grid>
     
                                <!-- Opacity element (visible when item is expired) -->
                                <StackPanel x:Name="OpacityPanel" Visibility="{Binding IsExpired, Converter={StaticResource VisibilityConverter}}"
                                        Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="3">
                                    <StackPanel.Background>
                                        <SolidColorBrush Color="White" Opacity="0.7"/>
                                    </StackPanel.Background>
                                </StackPanel>
                            </Grid>
                        </telerikp:RadDataBoundListBoxItem>
                    </DataTemplate>
                </telerikp:RadDataBoundListBox.ItemTemplate>
            </telerikp:RadDataBoundListBox>

    Every binding and other style element works perfect. But the items in the list uses not the whole width of the screen.

    Thanks for the help.
    Michael
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 09 Dec 2013 Link to this post

    Hi Michael,
    Thank you for contacting us. Unfortunately I was unable to reproduce the issue you're describing. Could you please send us a sample project demonstrating the issue. This way we will be able to assist you better. Thank you for your understanding.

    Regards,
    Kiril Stanoev
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
Back to Top