Question

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

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

Answer 1

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

主要使用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();
        }
    }

实现效果：

追问

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

追答

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

Answer 2

按照什么排列呢

追问

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

追答

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

追问

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