c# - 更改 ListBox 的 UniformGrid 列数的最佳方法是什么？

Question

我有一个带有 UniformGrid 布局的 ListBox ，我正在尝试更改“Columns”属性，但我不知道最好的方法。我尝试绑定(bind)到属性或以编程方式创建新布局，但我无法弄清楚。

<ListBox x:Name="ImagesList" ItemsSource="{Binding Path=GridImages}">
        <ListBox.ItemsPanel>

            <ItemsPanelTemplate>
                <UniformGrid IsItemsHost="True" Columns="3" VerticalAlignment="Top" />
            </ItemsPanelTemplate>

        </ListBox.ItemsPanel>
</ListBox>

当用户单击两个按钮时，我尝试在 1 和 3 列之间进行更改。我尝试使用 Columns="{Binding Path=MyColumnCount}" 进行绑定(bind)，但它永远不会改变，并尝试设置 x:Name 并从我的代码进行访问，没有成功。我还尝试实例化一个新的 UniformGrid，但我了解到我需要一个工厂，因此我无法设置不同的 Columns 值。

Answer 1

我想也许ItemsPanelTemplate没有继承ListBox'DataContext，但它确实继承了，所以你的Binding应该可以工作:

<ListBox x:Name="ImagesList" ItemsSource="{Binding Path=GridImages}" >
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid IsItemsHost="True" Columns="{Binding Path=MyColumnCount}"
                         VerticalAlignment="Top" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

尝试使用这个简单的 ViewModel，它会在计时器上更新 MyColumnCount:

public class ImagesVM : INotifyPropertyChanged
{
    private System.Threading.Timer _timer;
    private int _colIncrementor = 0;

    public ImagesVM()
    {
        _timer = new System.Threading.Timer(OnTimerTick, null,
                                            TimeSpan.FromSeconds(1),
                                            TimeSpan.FromSeconds(1));
        _gridImages = new string[] {
            "http://www.anbg.gov.au/images/flags/semaphore/a-icon.gif",
            "http://www.anbg.gov.au/images/flags/semaphore/b-icon.gif",
            "http://www.anbg.gov.au/images/flags/semaphore/c-icon.gif",
            "http://www.anbg.gov.au/images/flags/semaphore/d-icon.gif",
            "http://www.anbg.gov.au/images/flags/semaphore/e-icon.gif",
            "http://www.anbg.gov.au/images/flags/semaphore/f-icon.gif",
        };
    }
    private void OnTimerTick(object state)
    {
        this.MyColumnCount = (_colIncrementor++ % 3) + 1;
    }

    private int _myColumnCount = 3;
    public int MyColumnCount
    {
        get { return _myColumnCount; }
        set
        {
            _myColumnCount = value;
            this.PropertyChanged(this, new PropertyChangedEventArgs("MyColumnCount"));
        }
    }

    private string[] _gridImages = null;
    public string[] GridImages
    {
        get { return _gridImages; }
    }

    public event PropertyChangedEventHandler PropertyChanged = (s, e) => { };
}