ScrollViewer Theme and ListView in UI for WPF

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

没有腹肌的地瓜 · 统计学——平均数 - swxj - 博客园· 3 月前 ·

八块腹肌的春卷 · 关于对金华市政协七届五次会议 380号提案的答复函· 3 月前 ·

刚失恋的水煮肉 · git如何回滚到上次提交 • Worktile社区· 4 月前 ·

重感情的斑马 · 针对数据库文件报告操作系统错误 665 和 ...· 6 月前 ·

暴走的长颈鹿 · Microsoft.Extensions.L ...· 10 月前 ·

<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.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.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" />  </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 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 Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate . 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. < ResourceDictionary > < Style TargetType = "ScrollViewer" > < Setter Property = "telerik:StyleManager.Theme" Value = "Windows7" /> < Setter Property = "VerticalScrollBarVisibility" Value = "Auto" />  </ Style > </ ResourceDictionary > And this works wrongly, too. 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. 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 >  </ Window.Resources > < 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.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" />   </ 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.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 if (_theSelection == null ) _theSelection = TheList.Any() ? TheList[0] : null ; return _theSelection; set { _theSelection = value; } 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?

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools VB.NET to C# Converter Testing Framework

Free Tools

Support and Learning

Productivity and Design Tools

Free Tools

VB.NET to C# Converter Testing Framework