Problem with same ListView with different orientation

8 posts, 0 answers
  1. Miroslav
    Miroslav avatar
    30 posts
    Member since:
    Feb 2012

    Posted 12 Mar Link to this post

    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.

  2. Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 16 Mar Link to this post

    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
  3. DevCraft banner
  4. Miroslav
    Miroslav avatar
    30 posts
    Member since:
    Feb 2012

    Posted 23 Mar in reply to Tsvyatko Link to this post

    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š

  5. Miroslav
    Miroslav avatar
    30 posts
    Member since:
    Feb 2012

    Posted 23 Mar Link to this post

    <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>
  6. Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 24 Mar Link to this post

    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
  7. Miroslav
    Miroslav avatar
    30 posts
    Member since:
    Feb 2012

    Posted 24 Mar in reply to Tsvyatko Link to this post

    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š

  8. Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 28 Mar Link to this post

    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
  9. Miroslav
    Miroslav avatar
    30 posts
    Member since:
    Feb 2012

    Posted 02 Apr in reply to Tsvyatko Link to this post

    Hello,

    thank you, I understand now :-)

    Best Regards

    Miroslav Mareš

Back to Top
DevCraft banner