WrapPanel和ListBox需要帮助 [英] WrapPanel and ListBox help needed
本文介绍了WrapPanel和ListBox需要帮助的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将一对列表框包装在包装面板中，以便很好地播放.我有一个具有3个内容区域的控件，可以打开/关闭这些内容区域.第一个内容区域(content1)的大小固定，但接下来的两个内容区域(content2和content3) 需要共享剩余的可用空间.如果仅显示content2或content3，则它应自行占用剩余的全部空间(如果内部内容太大，则包装其内部内容).如果content2和content3都已打开，则它们应该 平均分配剩余空间(并根据需要包装其内部内容).我已经附上了一段代码和后面的简单代码，但是发生的是，如果同时切换了content3，则content2不会共享剩余空间.
I'm trying to get a pair of listboxes wrapped inside a wrappanel to play nicely. I've got a control that has 3 content areas which can be toggled on/off. The first content area (content1) is of fixed size, but they next 2 content areas (content2 and content3) need to share the remaining available space. If only content2 or content3 are visible, it should take up the entire remaining space (while wrapping its internal contents if it's too big) by itself. If content2 and content3 are both toggled on, they should share the remaining space equally (and wrapping their internal contents as necessary). I've attached a snippet and the simple code behind but what's happening is that content2 isn't sharing the remaining space if content3 is also togged on.
我尝试使用其他网格或StackPanel代替DockPanel，但没有结果.如果我明确地设置每个ListBox控件的MaxWidth，它们似乎可以很好地播放，但我真的需要它能够自己处理实际大小 世界应用程序.
I've tried using another Grid or a StackPanel instead of the DockPanel without results. If I explicitily set the MaxWidth of each of the ListBox controls they seem to play nicely but I really need this to be able to handle the sizing by itself for my real world application.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="1200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Yellow" BorderThickness="2" CornerRadius="3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToggleButton Name="toggle1" Click="toggle1_Click" Grid.Column="0">#1</ToggleButton>
<ToggleButton Name="toggle2" Click="toggle2_Click" Grid.Column="1">#2</ToggleButton>
<ToggleButton Name="toggle3" Click="toggle3_Click" Grid.Column="2">#3</ToggleButton>
</Grid>
</Border>
<DockPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">
<Border Name="content1" Visibility="Collapsed" BorderBrush="Red" MinWidth="250" MaxWidth="250" BorderThickness="2" CornerRadius="3" Margin="2,2" >
</Border>
<Border Name="content2" Visibility="Collapsed" BorderBrush="Green" BorderThickness="2" CornerRadius="3" Margin="2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox Background="Black" Grid.Column="0" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Items>
<Button Content="1" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="2" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="3" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="4" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="5" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="6" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="7" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="8" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="9" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="10" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="11" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="12" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="13" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="14" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="15" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
</ListBox.Items>
</ListBox>
</Grid>
</Border>
<Border Name="content3" Visibility="Collapsed" BorderBrush="Blue" BorderThickness="2" CornerRadius="3" Margin="2,2">
<ListBox Grid.Row="1" Grid.Column="0" Background="Black" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Items>
<Button Content="1" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="2" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="3" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="4" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="5" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="6" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="7" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="8" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="9" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="10" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="11" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="12" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="13" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="14" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="15" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
</ListBox.Items>
</ListBox>
</Border>
</DockPanel>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void toggle1_Click(object sender, RoutedEventArgs e)
{
if (toggle1.IsChecked == true)
content1.Visibility = Visibility.Visible;
else
content1.Visibility = Visibility.Collapsed;
}
private void toggle2_Click(object sender, RoutedEventArgs e)
{
if (toggle2.IsChecked == true)
content2.Visibility = Visibility.Visible;
else
content2.Visibility = Visibility.Collapsed;
}
private void toggle3_Click(object sender, RoutedEventArgs e)
{
if (toggle3.IsChecked == true)
content3.Visibility = Visibility.Visible;
else
content3.Visibility = Visibility.Collapsed;
}
}
}
推荐答案
这是代码的修改版本，可以满足您的需求.我用网格替换了停靠面板，并在切换时重置了列宽.
Here is a modified version of your code that does what you want. I replaced the dock panel with a grid and reset the column widths when you toggle.
<Window x:Class="TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:test="clr-namespace:TestApp"
Height="350" Width="1200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Yellow" BorderThickness="2" CornerRadius="3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToggleButton Name="toggle1" Click="toggle1_Click" Grid.Column="0">#1</ToggleButton>
<ToggleButton Name="toggle2" Click="toggle2_Click" Grid.Column="1">#2</ToggleButton>
<ToggleButton Name="toggle3" Click="toggle3_Click" Grid.Column="2">#3</ToggleButton>
</Grid>
</Border>
<Grid Name="contentGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Name="column1" Width="Auto"/>
<ColumnDefinition Name="column2" Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Name="content1" Visibility="Collapsed" BorderBrush="Red" MinWidth="250" MaxWidth="250" BorderThickness="2" CornerRadius="3" Margin="2,2" >
</Border>
<Border Name="content2" Grid.Column="1" Visibility="Collapsed" BorderBrush="Green" BorderThickness="2" CornerRadius="3" Margin="2,2">
<ListBox Background="Black" Grid.Column="0" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Items>
<Button Content="1" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="2" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="3" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="4" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="5" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="6" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="7" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="8" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="9" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="10" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="11" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="12" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="13" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="14" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="15" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
</ListBox.Items>
</ListBox>
</Border>
<Border Name="content3" Grid.Column="2" Visibility="Collapsed" BorderBrush="Blue" BorderThickness="2" CornerRadius="3" Margin="2,2">
<ListBox Grid.Row="1" Grid.Column="0" Background="Black" SelectionMode="Single" ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Items>
<Button Content="1" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="2" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="3" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="4" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="5" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="6" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="7" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="8" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="9" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="10" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="11" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="12" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="13" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="14" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
<Button Content="15" Width="100" Height="50" FontSize="18" FontWeight="Bold"></Button>
</ListBox.Items>
</ListBox>
</Border>
</Grid>
</Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestApp
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void toggle1_Click(object sender, RoutedEventArgs e)
{
if (toggle1.IsChecked == true)
{
content1.Visibility = Visibility.Visible;
}
else
{
content1.Visibility = Visibility.Collapsed;
}
SetColWidths();
}
private void toggle2_Click(object sender, RoutedEventArgs e)
{
if (toggle2.IsChecked == true)
{
content2.Visibility = Visibility.Visible;
}
else
{
content2.Visibility = Visibility.Collapsed;
}
SetColWidths();
}
private void toggle3_Click(object sender, RoutedEventArgs e)
{
if (toggle3.IsChecked == true)
{
content3.Visibility = Visibility.Visible;
}
else
{
content3.Visibility = Visibility.Collapsed;
}
SetColWidths();
}
private void SetColWidths()
{
if (toggle2.IsChecked == true && toggle3.IsChecked == true)
{
column1.Width = new System.Windows.GridLength((contentGrid.ActualWidth - 250)/2);
column2.Width = new System.Windows.GridLength((contentGrid.ActualWidth - 250) / 2);
}
else if (toggle2.IsChecked == true)
{
column1.Width = new System.Windows.GridLength(contentGrid.ActualWidth - 250);
column2.Width = new System.Windows.GridLength(0);
}
else
{
column1.Width = new System.Windows.GridLength(0);
column2.Width = new System.Windows.GridLength(contentGrid.ActualWidth - 250);
}
}
}
}
这篇关于WrapPanel和ListBox需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
