C# WPF用啥布局让里面的图片自动排列

Posted 2023-04-24

谢谢 大神啦 这个我完全没有思路啊

以字符串为例给你举个例子。

主要使用UnifromGrid布局，通过转换器来计算行数。

如有疑问，继续追问。

XAML代码：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ListBox x:Name="lb" ItemsSource="Binding LBSource">
            <ListBox.Resources>
                <local:RowConverter x:Key="RowConverter"/>
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="Binding ElementName=lb,Path=ItemsSource,Converter=StaticResource RowConverter,Mode=OneWay"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <Button Grid.Row="1" Content="添加一个" Click="Button_Click"/>
    </Grid>

CS代码：

    public partial class Window1 : Window
    
        public List<string> LBSource
        
            get  return (List<string>)GetValue(LBSourceProperty); 
            set  SetValue(LBSourceProperty, value); 
        

        public static readonly DependencyProperty LBSourceProperty =
            DependencyProperty.Register("LBSource", typeof(List<string>), typeof(Window1));

        public Window1()
        
            InitializeComponent();

            LBSource = new List<string>()  "text1" ;
            this.DataContext = this;
        

        private void Button_Click(object sender, RoutedEventArgs e)
        
            List<string> list =new List<string>( LBSource);
            list.Add("text" + (LBSource.Count + 1).ToString());
            LBSource = list;
        
    

转换器代码：

    public class RowConverter : IValueConverter
    

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        
            if (value == null)
            
                return 0;
            
            int i = (value as IList).Count;
            if (i <= 2)
            
                return i;
            
            else if (i <= 6)
            
                return 3;
            
            else
            
                return 4;
            
        

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        
            throw new NotImplementedException();
        
    

实现效果：

追问

要是图片呢？ 不是牵涉到绑定的问题么？

追答

关键看你用什么方式，我只是给你个思路，用不用绑定都能实现。

参考技术A 按照什么排列呢追问

在一个grid布局中，里面有一些图标，这个事可以根据用户需求来升级的，当两个图标就两行显示，6个图片就三行显示，而且图片的大小会跟着行数的变化而变化

追答

根据你说的，我有个思路：
1、首先Grid的宽是固定的，如800
2、代码中根据图片数量判断当前需要显示的行数和列数（读取配置文件可以动态设置）。
3、例如：判断是6个图片，分3行显示，每行2个
4、那么 可以在代码中 设置Grid有3行，每行中一个ListBox，注意设置ListBox的ItemPanel为StackPanel并且方向是横向的。
5、然后就好办了，每行的ListBox中加两个图片。
6、以上所有的不需要设置width和height，让其自动设置宽高。

追问

能大概的跟我写一下代码么？ 谢谢啦 想的我头都打了

WPF教程三；布局之WrapPanel面板

WrapPanel：环绕面板

     WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。

     Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。

    ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

    ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

1、Orientation属性的值设置为 Horizontal

示例效果图如下2图所示，图1是窗体宽度较小时候的效果，图2是窗体宽度拉大以后的效果

                                       图1

                                        图2        

使用XAML代码实现：

  

 1 <Window x:Class="WpfDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WrapPanel面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
 5     <WrapPanel Orientation="Horizontal">
 6         <Button Width="100">按钮1</Button>
 7         <Button Width="100">按钮2</Button>
 8         <Button Width="100">按钮3</Button>
 9         <Button Width="100">按钮4</Button>
10         <Button Width="100">按钮5</Button>
11         <Button Width="100">按钮6</Button>
12     </WrapPanel>    
13 </Window>

 

2、Orientation属性的值设置为Vertical

示例效果图如下2图所示，图1是窗体高度较大时候的效果，图2是窗体高度较小时的效果

                                         图1

          

                                         图2     

使用XAML代码实现：

 1 <Window x:Class="WpfDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="WrapPanel面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
 5     <WrapPanel Orientation="Vertical">
 6         <Button Width="100">按钮1</Button>
 7         <Button Width="100">按钮2</Button>
 8         <Button Width="100">按钮3</Button>
 9         <Button Width="100">按钮4</Button>
10         <Button Width="100">按钮5</Button>
11         <Button Width="100">按钮6</Button>
12     </WrapPanel>    
13 </Window>