【问题标题】:C# WPF Scrollable container for usercontrols用于用户控件的 C# WPF 可滚动容器
【发布时间】:2011-10-19 17:45:46
【问题描述】:

我查看了所有内容,但无法找到解决问题的方法。我的整个方法可能会失败,如果我只是以错误的方式解决这个问题,我可以重新开始。

我有一个带有页眉、列表框和页脚的 WPF 窗口。我想以编程方式将 n 个用户控件添加到列表框,并使列表框本身可滚动(而不是整个窗口)。我还想关闭单击列表框中的项目时发生的情况(背景突出显示为蓝色 - 我希望它更改用户控件的背景现在将其视为大列表框项目)真的列表框甚至可能是错误的东西。

我已经尝试过堆栈面板、滚动面板和六种其他方法。列表框恰好是我现在使用的。我有十几种不同类型的用户控件,并且根据业务逻辑需要显示它们的一些组合,所以我确实需要一个可滚动的用户控件容器,我可以在其中确定已单击的用户控件(如果有的话)。

这是 MainWindow.xaml 的 XAML

<Window x:Class="LayoutTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:customUserControls="clr-namespace:LayoutTest.Properties"
        Title="Layout Sample" Height="Auto" MaxWidth="600" MinWidth="600" Width="600"  ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="393*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>        
        <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24" TextAlignment="Center" Margin="5,5,210,5">Header</TextBlock>
        <ListBox x:Name="lstPanels" Grid.Row="1" Grid.ColumnSpan="2" HorizontalContentAlignment="Stretch" Margin="0,0,0,17"/>        
        <TextBlock Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="24" TextAlignment="Center" Margin="5,5,210,5">Footer</TextBlock>
    </Grid>
</Window>

这里是 UserControl1.xaml 的 XAML

<UserControl x:Class="LayoutTest.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="500" Padding="0" Margin="10">
    <Border BorderThickness="2" BorderBrush="OrangeRed" CornerRadius="10">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="imgLogo" MinWidth="100" MinHeight="100" MaxWidth="100" MaxHeight="100" />
            <Grid MinWidth="400">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="108*" />
                    <ColumnDefinition Width="104*" />
                    <ColumnDefinition Width="188*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="25*" />
                    <RowDefinition Height="35*" />
                </Grid.RowDefinitions>
                <TextBlock Text="xxxxx:" Margin="5,2,2,2" />
                <TextBlock Grid.Column="1" Grid.ColumnSpan="2"  Text="xxxxx" Margin="2" />
                <TextBlock Text="xxxxx:" Grid.Row="1" Margin="5,2,2,2" />
                <TextBlock Grid.Column="1" Grid.Row="1" Text="xxxxxx" Grid.ColumnSpan="2" Margin="2" />
                <CheckBox Content="xxxxxx" Grid.Row="3" Name="chkSkipConfiguration" Grid.ColumnSpan="2" VerticalAlignment="Center" Margin="0,0,112,5" Width="200" HorizontalAlignment="Right" />
                <Button Content="xxxxx" Grid.Column="2" Grid.Row="3"  Padding="0" HorizontalAlignment="Right" Width="50" Margin="0,0,19,0"  />
            </Grid>
        </StackPanel>
    </Border>
</UserControl>

最后在 MainWindow.xaml.cs 的构造函数中有以下 sn-p 来创建 10 个用户控件实例:

        for(int i=0; i<10; i++)
        {
            lstPanels.Items.Add(new UserControl1());
        }

【问题讨论】:

    标签: c# wpf xaml


    【解决方案1】:

    首先给你的 ListBox 一个高度和宽度,或者显式地或者通过在容器中拉伸它。使用 ListBox,您可以使用 ScrollViewer.VerticalScrollBarVisibility="Visible" 定义垂直滚动条。如果您定义了一个高度,那么它应该会在您添加的项目超出该高度时自动启用滚动。

    就突出显示而言,试试这个二传手。只需将其放置在针对 ListBoxItem 类型的样式中即可:

      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
               <Border x:Name="border" Background="Transparent">
                  <ContentPresenter />
               </Border>
               <ControlTemplate.Triggers>
                  <Trigger Property="IsSelected" Value="true">
                     <Setter TargetName="border" Property="Background">
                        <Setter.Value>Transparent</Setter.Value>
                     </Setter>
                  </Trigger>
               </ControlTemplate.Triggers>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
    

    【讨论】:

    • 我能够让列表框滚动,所以谢谢你,但我坚持这种风格。使用这个标记选择一个列表项会删除默认的蓝色背景,所以这绝对是一个改进。我需要更改什么来设置 UserControl 的背景颜色(这是 listboxitem 包含的内容)? UserControl,如我的原始示例所示,有一个橙色边框。如果单击该项目时我能够在用户控件的边框内着色空间,那就太好了。谢谢!
    • 如果您在 ListBoxItem 上保留该样式,我相信您可以通过向控件添加一个名为 IsSelected 的属性来实现您想要的。如果您处理 Border 元素的 PreviewMouseDown 或 PreviewMouseUp,并将 IsSelected 设置为 !IsSelected 每个事件,则可以为 IsSelected 属性添加 DataTrigger 以更改 Border 或 Grid 的背景。
    【解决方案2】:

    即兴发挥... 是否有理由不能使用 ScrollViewer 包装内容并让包含的控件通过传递消息来响应点击?滚动查看器:http://msdn.microsoft.com/en-us/library/ms750665.aspx

    【讨论】:

    • 我曾尝试过一次滚动查看器,但它滚动了整个页面。我找不到任何方法让页面中间的一堆用户控件滚动,同时保持页眉和页脚始终可见。文档中的示例将 scrollviewer 作为顶级元素。这可能是可能的,但我尝试时无法正确使用语法
    • 我只是尝试用滚动查看器替换列表框,并在滚动查看器内放置了一个堆栈面板。然后我将我的用户控件添加到 stackpanel.children 而不是 listbox.items 并得到了相同的结果。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-29
    • 1970-01-01
    • 2017-06-03
    • 1970-01-01
    • 2011-07-15
    相关资源
    最近更新 更多