Problem with same ListView with different orientation

[Miroslav]

Hello,

I defined 2 same ListView with different orientation. In vertical is all ok, but in horizontal orientation I have different size of items. I tried to define the size of the item, but it's still the same. What's wrong? I have latest internal build.

[Tsvyatko]

Hello Miroslav,

Thank you for contacting us. Could elaborate a bit more on the setup you have for the two listviews (xaml. cs snippets) as well as the desired result you are looking for. That way we can suggest an appropriate the course of action.

Regards,
Tsvyatko
Telerik

[Miroslav]

Hello,

I make a sample project with my problem. I attached a image, where this is shown.

Sorry, but I cannot attached zip file :-(

Best Regards

Miroslav Mareš

[Miroslav]

<Page
    x:Class="ListViewOrientation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ListViewOrientation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:telerikDataControls="using:Telerik.UI.Xaml.Controls.Data"
    mc:Ignorable="d">
  <Page.Resources>
    <LinearGradientBrush x:Key="GradientBrush" EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#00000000" Offset="0"/>
      <GradientStop Color="#000000" Offset="1"/>
    </LinearGradientBrush>
  </Page.Resources>
  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="3*"/>
      <ColumnDefinition Width="2*"/>
      <ColumnDefinition Width="300"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" MaxHeight="300"/>
      <RowDefinition Height="Auto" MaxHeight="120"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Column="0" Grid.Row="0" Fill="Red"/>
    <Rectangle Grid.Column="1" Grid.Row="0" Fill="Blue"/>
    <Rectangle Grid.Column="0" Grid.Row="1" Fill="Green"/>
    <Rectangle Grid.Column="1" Grid.Row="1" Fill="Yellow"/>
    <Rectangle Grid.Column="0" Grid.Row="2" Fill="Cyan"/>
    <Rectangle Grid.Column="1" Grid.Row="2" Fill="Magenta"/>
    <telerikDataControls:RadListView x:Name="listViewVertical"
                                     Grid.Column="2" Grid.RowSpan="3"
                                     MaxHeight="920"
                                     VerticalAlignment="Top"
                                     ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled"
                                     ItemsSource="{Binding Items}">
      <telerikDataControls:RadListView.DataContext>
        <local:ViewModel/>
      </telerikDataControls:RadListView.DataContext>
      <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
          <Grid MaxWidth="300">
            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
              <Rectangle Fill="Red" Width="300" Height="188"/>
            </Border>
            <Border Padding="12"
                    VerticalAlignment="Bottom"
                    Background="{StaticResource GradientBrush}">
              <TextBlock Text="{Binding Text}" TextTrimming="CharacterEllipsis" Foreground="White"/>   
            </Border>
          </Grid>
        </DataTemplate>
      </telerikDataControls:RadListView.ItemTemplate>
    </telerikDataControls:RadListView>
    <telerikDataControls:RadListView x:Name="listViewHorizontal"
                                     Grid.ColumnSpan="2" Grid.Row="3"
                                     MaxHeight="188" HorizontalAlignment="Left"
                                     Orientation="Horizontal"
                                     ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                     ItemsSource="{Binding Items}">
      <telerikDataControls:RadListView.DataContext>
        <local:ViewModel/>
      </telerikDataControls:RadListView.DataContext>
      <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
          <Grid MaxWidth="300">
            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
              <Rectangle Fill="Yellow" Width="300" Height="188"/>
            </Border>
            <Border Padding="12"
                    VerticalAlignment="Bottom"
                    Background="{StaticResource GradientBrush}">
              <TextBlock Text="{Binding Text}" TextTrimming="CharacterEllipsis" Foreground="White"/>
            </Border>
          </Grid>
        </DataTemplate>
      </telerikDataControls:RadListView.ItemTemplate>
    </telerikDataControls:RadListView>
  </Grid>
</Page>

[Tsvyatko]

Hello Miroslav,

Thank you for sharing this information. It helped us get a better idea of the issue you are having. Currently, the style padding and margin affects the size of the contents. you can apply the following style to get consistent result. You can then modify the margin and the padding to reflect the desired result.

<telerikDataControls:RadListView.ItemStyle>
    <Style TargetType="telerikListView:RadListViewItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
    </Style>
</telerikDataControls:RadListView.ItemStyle>

Let me know if this helps.

As this does not look like a consistent behavior will do our best to improve it in future releases.

Regards,
Tsvyatko
Telerik

[Miroslav]

Hello,

I tried your style, but I'm not sure, that I understand this. When I change padding or margin, I get same result as before. Only when padding and margin is set to zero, I get same item size in both orientations. So I cannot change, in this version, padding or margin?

Best Regards

Miroslav Mareš

[Tsvyatko]

Hi Miroslav,

Currently, the issue is related to the fact that the padding and the margin are taken into account after the listview if measured causing the inner content to shrink when using fixed size. The first option is to apply margin/padding like that:

 - vertical 

<Style TargetType="telerikListView:RadListViewItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0, 10"/>
    </Style>

 - horizontal

<Style TargetType="telerikListView:RadListViewItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="10, 0"/>
    </Style>

The alternative approach will be to increase the width in vertical, height in horizontal to render with same size. I have attached a project using modified xaml to illustrate the idea


We will do our best to introduce fix in our next build for this issue. Please excuse us for the inconvenience caused.

Regards,
Tsvyatko
Telerik

[Miroslav]

Hello,

thank you, I understand now :-)

Best Regards

Miroslav Mareš