将 ItemsControl 绑定到 ScrollViewer答案

【问题标题】：Binding ItemsControl to ScrollViewer将 ItemsControl 绑定到 ScrollViewer
【发布时间】：2013-09-17 12:09:29
【问题描述】：

一开始我会展示一些代码：

private ObservableCollection<otwarteBezStolika> otwarteBezStolika = new ObservableCollection<otwarteBezStolika>();

        public ObservableCollection<otwarteBezStolika> listunia
        {
            get { return otwarteBezStolika; }
            set { otwarteBezStolika = value; }
        }
    }
    public class otwarteBezStolika
    {
        public string number { get; set; }
        public string date { get; set; }
        public int orderID { get; set; }
        public decimal price { get; set; }
        public decimal priceR { get; set; }
        public string opisRach { get; set; }
        public string sum { get; set; }
    }

现在在 xaml 中：

<Window.Resources>
    <DataTemplate x:Key="dataTempl">
        <Border BorderBrush="Coral" BorderThickness="1" Width="170">
            <Button Name="goToPOS" Tag="{Binding orderID}" Click="goToPOS_Click" Style="{StaticResource TabCloseButtonStyle}" Margin="1">
                <StackPanel>
                    <Label Content="{Binding number}" HorizontalAlignment="Center" FontSize="15" FontWeight="ExtraBold" HorizontalContentAlignment="Center"></Label>
                    <Border BorderBrush="Turquoise" BorderThickness="1" Width="170"></Border>
                    <Label Content="{Binding date}" FontSize="12" HorizontalAlignment="Center"></Label>
                    <TextBlock Text="{Binding opisRach}" FontStyle="Italic" FontSize="12" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Margin="0,0,0,2"></TextBlock>
                    <Border BorderBrush="WhiteSmoke" BorderThickness="1" Width="170"></Border>
                    <Label Content="{Binding sum}" FontSize="19" HorizontalAlignment="Center"></Label>
                </StackPanel>
            </Button>
        </Border>
    </DataTemplate>

    <DataTemplate x:Key="mainTemplate">
        <StackPanel>

            <ItemsControl x:Name="imageContent" ItemsSource="{Binding listunia}" ItemTemplate="{StaticResource dataTempl}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

网格：

<Grid Grid.Row="0">
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource mainTemplate}" />
        </ScrollViewer>
    </Grid>

问题是我看不到任何项目（我正在使用 sqldatareader 填充项目，并将它们添加到列表中 - 顺便说一下，DataTable 也可以工作吗？所以我可以使用 SqlDataAdapter 代替 while(rdr.Read()) sda 和 sda.fill(Datatable))

第二个问题是，当我将“dataTempl”放入滚动查看器时，它确实有效，例如：

<Grid Grid.Row="0">
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}" />
        </ScrollViewer>
    </Grid>

但项目是垂直显示的，但我需要从左到右水平查看它们。

感谢您的回答！

【问题讨论】：

标签： wpf itemscontrol scrollviewer itemssource

【解决方案1】：

尝试这样做.. 你不需要主模板。

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <ItemsControl Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}">
    <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
               <StackPanel Orientation="Vertical" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
           </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</ScrollViewer>

或者你可以简单地使用：

  <ListBox Name="templ" ItemsSource="{Binding ElementName=UI, Path=listunia }" ItemTemplate="{StaticResource dataTempl}">
  </ListBox>

【讨论】：

好的，它现在确实显示项目 - 但屏幕中间只有一个 :) 我已将 StackPanel 的宽度和高度更改为 150/70，我相信它应该显示更多，因为"listunia" 有 71 项
它是有效的吗？你有多少物品？你如何设置视图的数据上下文？最后一个是什么元素“UI”:)？
抱歉，76 不是 71。我可以使用垂直/水平对齐正确显示它们，但看起来滚动查看器宽度设置不正确。项目现在显示如下：[][][][][][][][][][][][][][]，不像 [][][][] "enter" [][ ][][] "输入" [][][][] "输入" [][][][]:)
为什么不使用没有任何项目面板的简单列表框呢？也不要使用滚动查看器...itemscontrol 将自行显示其自动滚动..
它不能是列表视图，因为我对每个项目都有适当的样式。它必须是内部带有 stackPanel 的“按钮”（显示信息等），因此单击后将转到另一个窗口。是的，我知道我可以在列表视图中使用 selectionchanged，但我想像这样保留它 - 作为按钮。但是仍然显示它们是错误的，正如我之前所说的那样:)

【解决方案2】：

这将以等宽字体显示。前四个空格

<ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl Name="kaloo" DisplayMemberPath="Name" ss:DragDrop.IsDragSource="True" ss:DragDrop.IsDropTarget="True"  >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 </ScrollViewer>

【讨论】：