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

Problem with same ListView with different orientation

7 Answers 30 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Miroslav
Top achievements
Rank 1
Miroslav asked on 12 Mar 2016, 05:55 PM

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.

7 Answers, 1 is accepted

Sort by
0
Tsvyatko
Telerik team
answered on 16 Mar 2016, 12:42 PM
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
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 Feedback Portal and vote to affect the priority of the items
0
Miroslav
Top achievements
Rank 1
answered on 23 Mar 2016, 05:59 PM

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š

0
Miroslav
Top achievements
Rank 1
answered on 23 Mar 2016, 06:00 PM
<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>
0
Tsvyatko
Telerik team
answered on 24 Mar 2016, 02:30 PM
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
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 Feedback Portal and vote to affect the priority of the items
0
Miroslav
Top achievements
Rank 1
answered on 24 Mar 2016, 08:17 PM

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š

0
Tsvyatko
Telerik team
answered on 28 Mar 2016, 07:59 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
Miroslav
Top achievements
Rank 1
answered on 02 Apr 2016, 10:39 AM

Hello,

thank you, I understand now :-)

Best Regards

Miroslav Mareš

Tags
ListView
Asked by
Miroslav
Top achievements
Rank 1
Answers by
Tsvyatko
Telerik team
Miroslav
Top achievements
Rank 1
Share this question
or