ScrollViewer Theme and ListView

[Inger Marie]

I've made a small example which illustrates my problem:

MainWindow.xaml:

<Window x:Class="TestListView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Window.Resources>
        <ResourceDictionary>
            <Style TargetType="ScrollViewer">
                <Setter Property="telerik:StyleManager.Theme"  Value="Windows7" />
                <Setter Property="VerticalScrollBarVisibility"  Value="Auto" />
                <Setter Property="HorizontalScrollBarVisibility"  Value="Auto" />
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ListView Grid.Row="0" Grid.Column="0" x:Name="_lwReminders" Margin="1" Background="WhiteSmoke" ItemsSource="{Binding TheList}"
                      HorizontalAlignment="Stretch" SelectionMode="Single"                    
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                      ScrollViewer.CanContentScroll="False"
                      HorizontalContentAlignment="Stretch"
                      VerticalContentAlignment="Stretch"
                      VirtualizingStackPanel.IsVirtualizing="True"
                       VirtualizingStackPanel.VirtualizationMode="Recycling">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Focusable" Value="false"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBox Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch"
                            VerticalAlignment="Center" TextWrapping="Wrap" TextAlignment="Left"
                            Text="{Binding Description}" Margin="5" AcceptsReturn="True" AcceptsTab="True"  />
                            <!--Style="{StaticResource TextBoxInputStyle}" />-->


                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

MainWindow.xaml.cs:

public partial class MainWindow : Window
    {
        public class Animal
        {
            public string Name { get; set; }
            public string Description { get; set; }
        }
        public MainWindow()
        {
            InitializeComponent();
            TheList.Add(new Animal{Description = "Elephants are large mammals of the family Elephantidae and the order Proboscidea. Traditionally, two species are recognised, the African elephant (Loxodonta africana) and the Asian elephant (Elephas maximus), although some evidence suggests that African bush elephants and African forest elephants are separate species (L. africana and L. cyclotis respectively). Elephants are scattered throughout sub-Saharan Africa, and South and Southeast Asia. They are the only surviving proboscideans; extinct species include mammoths and mastodons. The largest living terrestrial animals, male African elephants can reach a height of 4 m (13 ft) and weigh 7,000 kg (15,000 lb). These animals have several distinctive features, including a long proboscis or trunk used for many purposes, particularly for grasping objects. Their incisors grow into tusks, which serve as tools for moving objects and digging and as weapons for fighting. The elephant's large ear flaps help to control the temperature of its body. African elephants have larger ears and concave backs while Asian elephants have smaller ears and convex or level backs."});
            TheList.Add(new Animal{Description = "The giraffe (Giraffa camelopardalis) is an African even-toed ungulate mammal, the tallest living terrestrial animal and the largest ruminant. Its species name refers to its camel-like appearance and the patches of color on its fur. Its chief distinguishing characteristics are its extremely long neck and legs, its horn-like ossicones and its distinctive coat patterns. It stands 5–6 m (16–20 ft) tall and has an average weight of 1,600 kg (3,500 lb) for males and 830 kg (1,800 lb) for females. It is classified under the family Giraffidae, along with its closest extant relative, the okapi. The nine subspecies are distinguished by their coat patterns."});
            TheList.Add(new Animal { Description = "The lion (Panthera leo) is one of the four big cats in the genus Panthera and a member of the family Felidae. With some males exceeding 250 kg (550 lb) in weight,[4] it is the second-largest living cat after the tiger. Wild lions currently exist in sub-Saharan Africa and in Asia (where an endangered remnant population resides in Gir Forest National Park in India) while other types of lions have disappeared from North Africa and Southwest Asia in historic times. Until the late Pleistocene, about 10,000 years ago, the lion was the most widespread large land mammal after humans. They were found in most of Africa, across Eurasia from western Europe to India, and in the Americas from the Yukon to Peru.[5] The lion is a vulnerable species, having seen a major population decline of 30–50% over the past two decades[date missing] in its African range.[2] Lion populations are untenable outside designated reserves and national parks. Although the cause of the decline is not fully understood, habitat loss and conflicts with humans are currently the greatest causes of concern. Within Africa, the West African lion population is particularly endangered." });
        }


        private readonly List<Animal> _theList = new List<Animal>();
        public List<Animal> TheList
        {
            get { return _theList; }
        }
    }

The solution attached contains a style on Scrollviewer, which sets the theme, verticalscrollbarvisibility and horizontalscrollbarvisibility.

If I remove the 3 setters from the style, then the example does what I want it to (see jpg-file example A, textbox uses wrap), but when the 3 setters are in the style it kind of destroys the way it is supposed to work (see jpg-file example B, textbox does not use wrap).

How do I get my small application to use the 3 setters while behaving like in example A ?

Thanks

[Vanya Pavlova]

Hi Inger,

 

The behavior you get is the expected one. The TextBox is not wrapped, because the ScrollViewer measures its children with infinity (HorizontalScrollBarVisibility set to Auto).
What you may do here is to bind the MaxWidth property of the TextBox to the ActualWidth of the ScrollViewer as shown below:

<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" TextWrapping="Wrap"
                              TextAlignment="Left"
                              MaxWidth="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}"
                              Text="{Binding Description}" Margin="5" AcceptsReturn="True" AcceptsTab="True"  />

Will you verify how this works for you? 


Regards,
Vanya Pavlova
the Telerik team

[Inger Marie]

Thanks for your reply. It worked, but it seems weird to me. The possible values are Auto, Disabled, Hidden and Visible. I fail to see how HorizontalScrollBarVisibility=Auto can be expected to translate to width=Auto.

But in the listview itself, I do set the  ScrollViewer.HorizontalScrollBarVisibility="Disabled" which seems to be ignored. How so?

BTW: My real-life are at bit more complicated with a grid inside the itemtemplate and the listview may or may not have a vertical scrollbar which would make the solution you propose even more complicated because I would have to know if there is a vertical scrollbar and subtract it's width from actualwidth if it is present.

But I realize that this has actually nothing to do with Telerik - when I remove the template and just keep  <Setter Property="HorizontalScrollBarVisibility"  Value="Auto" /> I get the same bad behaviour from my program.

[Inger Marie]

I just tried this:

<ResourceDictionary>
          <Style TargetType="ScrollViewer">
              <Setter Property="telerik:StyleManager.Theme"  Value="Windows7" />
              <Setter Property="VerticalScrollBarVisibility"  Value="Auto" />
              <!--<Setter Property="HorizontalScrollBarVisibility"  Value="Auto" />-->
          </Style>
      </ResourceDictionary>

And this works wrongly, too.

[Vanya Pavlova]

Hello Inger,

 

By default, HorizontalScrollBarVisibility is set to Disabled for the ScrollViewer for compatibility between WPF/Silverlight. However in our themes HorizontalScrollBarVisibility/VerticalScrollBarVisibility are set to Auto. The ListView's settings are ignored, because you have already used Auto setting in a style setter within ScrollViewer's style. What you may do is to disable the HorizontalScrollBar, as follows:

<Style TargetType="ScrollViewer">
    <Setter Property="telerik:StyleManager.Theme" Value="Windows7" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
</Style>

Furthermore I also believe that the following forum thread might be useful on that matter. 

Greetings,
Vanya Pavlova
the Telerik team

[Inger Marie]

So, I have some listviews which I want to have the behaviour we have described (with HorizontalScrollBarVisibility=Disabled) and others where I want it to be possible to scroll horizontally (with HorizontalScrollBarVisibility=Auto).

Which means that creating the base Scrollviewer style is not going to work in one of the two cases (since I cannot change auto to disabled or disabled to auto in a specific case. Thus, I cannot create:

<ResourceDictionary>
            <Style TargetType="ScrollViewer">
                <Setter Property="telerik:StyleManager.Theme"  Value="Windows7" />
                <Setter Property="VerticalScrollBarVisibility"  Value="Auto" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="HorizontalScrollBarVisibility"  Value="Auto" />
            </Style>
        </ResourceDictionary>

So, I still want all my scrollbars to have the Windows7 theme. But now I've run into another problem: Adding the theme to the listviews themselves makes their content go away. If I remove the lines containing
telerik:StyleManager.Theme="Windows7"
from both listviews, they both behaves as expected - but then the color of the scrollbars is not right.

Is that fixable? How can I make this example work?

Here's MainView.Xaml:

<Window x:Class="TestListView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" xmlns:Controls3="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonView" xmlns:TestListView="clr-namespace:TestListView"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Window.Resources>
        <!--<ResourceDictionary>
            <Style TargetType="ScrollViewer">
                <Setter Property="telerik:StyleManager.Theme"  Value="Windows7" />
                <Setter Property="VerticalScrollBarVisibility"  Value="Auto" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="HorizontalScrollBarVisibility"  Value="Auto" />
            </Style>
        </ResourceDictionary>-->
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MaxHeight="300" />
            <RowDefinition Height="*" MaxHeight="300" />
            <RowDefinition Height="Auto" MaxHeight="300" />
            <RowDefinition Height="*" MaxHeight="300"/>
        </Grid.RowDefinitions>


        <TextBlock Grid.Row="0" Text="Not Horizotally Scrollable" Margin="2" FontSize="14" FontWeight="Bold"></TextBlock>
        <ListView Grid.Row="1" Grid.Column="0" x:Name="_lwList1" Margin="2" Background="WhiteSmoke" ItemsSource="{Binding TheList}"
                      HorizontalAlignment="Stretch" SelectionMode="Single"
                  telerik:StyleManager.Theme="Windows7"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                      ScrollViewer.CanContentScroll="False"
                      HorizontalContentAlignment="Stretch"
                      VerticalContentAlignment="Stretch"
                      VirtualizingStackPanel.IsVirtualizing="True"
                       VirtualizingStackPanel.VirtualizationMode="Recycling">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Focusable" Value="false"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch"
                            VerticalAlignment="Center" TextWrapping="Wrap" TextAlignment="Left"
                            Text="{Binding Description}" Margin="5" Background="Transparent" TextTrimming="CharacterEllipsis" />
                            <!--Style="{StaticResource TextBoxInputStyle}" />-->

                        <!--MaxWidth="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}"-->

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <TextBlock Grid.Row="2" Text="Horizotally Scrollable" Margin="2,10,2,2"  FontSize="14" FontWeight="Bold"></TextBlock>
        <ListView Grid.Row="3" Grid.Column="0" x:Name="_lwList2" Margin="2" Background="WhiteSmoke" ItemsSource="{Binding TheList}"
                  telerik:StyleManager.Theme="Windows7"
                      HorizontalAlignment="Stretch" SelectionMode="Single"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                        ScrollViewer.VerticalScrollBarVisibility="Auto"
                      ScrollViewer.CanContentScroll="False"
                      HorizontalContentAlignment="Stretch"
                      VerticalContentAlignment="Stretch"
                      VirtualizingStackPanel.IsVirtualizing="True"
                       VirtualizingStackPanel.VirtualizationMode="Recycling">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Focusable" Value="false"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <TextBox Text="{Binding Name}"></TextBox>
                        <TextBox Text="{Binding Color}" Grid.Column="1"></TextBox>

                        <TextBox Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
                            VerticalAlignment="Center" TextWrapping="Wrap" TextAlignment="Left"
                            Text="{Binding Description}" Margin="5" AcceptsReturn="True" AcceptsTab="True"  MaxHeight="100"/>

                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

MainView.xaml.cs:

public class Animal
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Color { get; set; }
    }
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
            TheList.Add(new Animal { Name = "Elephant", Color = "Gray", Description = "Elephants are large mammals of the family Elephantidae and the order Proboscidea. Traditionally, two species are recognised, the African elephant (Loxodonta africana) and the Asian elephant (Elephas maximus), although some evidence suggests that African bush elephants and African forest elephants are separate species (L. africana and L. cyclotis respectively). Elephants are scattered throughout sub-Saharan Africa, and South and Southeast Asia. They are the only surviving proboscideans; extinct species include mammoths and mastodons. The largest living terrestrial animals, male African elephants can reach a height of 4 m (13 ft) and weigh 7,000 kg (15,000 lb). These animals have several distinctive features, including a long proboscis or trunk used for many purposes, particularly for grasping objects. Their incisors grow into tusks, which serve as tools for moving objects and digging and as weapons for fighting. The elephant's large ear flaps help to control the temperature of its body. African elephants have larger ears and concave backs while Asian elephants have smaller ears and convex or level backs." });
            TheList.Add(new Animal { Name = "Giraffe", Color = "Yellow", Description = "The giraffe (Giraffa camelopardalis) is an African even-toed ungulate mammal, the tallest living terrestrial animal and the largest ruminant. Its species name refers to its camel-like appearance and the patches of color on its fur. Its chief distinguishing characteristics are its extremely long neck and legs, its horn-like ossicones and its distinctive coat patterns. It stands 5–6 m (16–20 ft) tall and has an average weight of 1,600 kg (3,500 lb) for males and 830 kg (1,800 lb) for females. It is classified under the family Giraffidae, along with its closest extant relative, the okapi. The nine subspecies are distinguished by their coat patterns." });
            TheList.Add(new Animal { Name = "Lion", Color = "Yellow", Description = "The lion (Panthera leo) is one of the four big cats in the genus Panthera and a member of the family Felidae. With some males exceeding 250 kg (550 lb) in weight,[4] it is the second-largest living cat after the tiger. Wild lions currently exist in sub-Saharan Africa and in Asia (where an endangered remnant population resides in Gir Forest National Park in India) while other types of lions have disappeared from North Africa and Southwest Asia in historic times. Until the late Pleistocene, about 10,000 years ago, the lion was the most widespread large land mammal after humans. They were found in most of Africa, across Eurasia from western Europe to India, and in the Americas from the Yukon to Peru.[5] The lion is a vulnerable species, having seen a major population decline of 30–50% over the past two decades[date missing] in its African range.[2] Lion populations are untenable outside designated reserves and national parks. Although the cause of the decline is not fully understood, habitat loss and conflicts with humans are currently the greatest causes of concern. Within Africa, the West African lion population is particularly endangered." });
        }


        private readonly List<Animal> _theList = new List<Animal>();
        public List<Animal> TheList
        {
            get { return _theList; }
        }

        private Animal _theSelection;
        public Animal TheSelection
        {
            get
            {
                if (_theSelection == null)
                {
                    _theSelection = TheList.Any() ? TheList[0] : null;
                }
                return _theSelection;
            }
            set { _theSelection = value; }
        }
    }

[Vanya Pavlova]

Hi Inger,

 

As you may know we provide theme support for several native Microsoft controls, which are listed in our documentation, please follow this link. The Content of the ListView is blank, because you are trying to set a Telerik theme to it. Since we do not provide a theme for this control, it disappears. For the time being what you may do is to isolate the styles on a ListView level, not on an application level in a ResourceDictionary:

HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"

            VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling">

        <ListView.Resources>

            <Style TargetType="ScrollViewer">

                <Setter Property="telerik:StyleManager.Theme" Value="Windows7" />
.....

            </Style>

        </ListView.Resources>

In this way you may set ScrollViewer specific properties on a control level.
May you verify how this works for you?

 

Regards,
Vanya Pavlova
the Telerik team

[Inger Marie]

It works. Thanks! And thanks for the link.
I was unaware that you did not support the ListView. I use that extensively so this explains some of the problems I've had.