更新

Question

我希望能够在我的程序运行时调整列表框中图像的大小和高度。

我的列表框如下：

<Grid>
    <ListBox x:Name="movieListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="White">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel ItemHeight="300"
                           ItemWidth="200"
                           Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="5" HorizontalAlignment="Center">
                    <Image Margin="3" Source="{Binding path}" MouseDown="ImageClick_MouseDown" />
                    <TextBlock TextAlignment="Center" Text="{Binding name}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

如何在运行时使列表框项目的高度和宽度发生变化？例如按下按钮，每个项目高度改为“400”。

另外，如何返回列表框项目的当前大小？

更新

以下列方式将图像加载到列表框中：

namespace Media_Console
{
    /// <summary>
    /// Interaction logic for MediaChooser.xaml
    /// </summary>
    public partial class MovieChooser : Page
    {
...
    private List<MovieListing> movie_posters_list = new List<MovieListing>();
...
    public void LoadImages(string foldername)
    {
        foreach (string folder in foldername)
        {
...
            movie_posters_list.Add(new MovieListing(imagelocation, filmName, quality, year));
        }

        movieListBox.ItemsSource = movie_posters_list;
        movieListBox.Items.Refresh();
    }
... 

    #region ChangeItemsSize

    public bool MakeItemsLarge
    {
        get { return _makeItemsLarge; }
        set
        {
            if (value != _makeItemsLarge)
            {
                _makeItemsLarge = value;
                Console.WriteLine("Edit to large");
                movieListBox.Items.Refresh();
                //LoadMovies(blankList, "ALL");
                OnPropertyChanged();
            }
        }
    }

    #endregion ChangeItemsSize


    public class MovieListing
    {
        public string name { get; set; }
        public string path { get; set; }
        public string quality { get; set; }
        public string year { get; set; }
        public string location { get; set; }

        public MovieListing(string path, string name, string quality, string year, string location)
        {
            this.path = path;
            this.name = name;
            this.quality = quality;
            this.year = year;
            this.location = location;
        }
    }
}

更新了XAML

<Grid>
    <ListBox x:Name="movieListBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="White" Margin="0,0,148,0">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
         </ListBox.ItemsPanel>
        <ListBox.ItemTemplate >
            <DataTemplate>
                <StackPanel x:Name="OuterPanel" Margin="5" HorizontalAlignment="Center">
                    <Image Margin="3" Source="{Binding path}" MouseDown="ImageClick_MouseDown" />
                    <TextBlock TextAlignment="Center" Text="{Binding name}"/>
                </StackPanel>
                <DataTemplate.Triggers>
                    <DataTrigger 
                        Binding="{Binding DataContext.MakeItemsLarge, RelativeSource={RelativeSource AncestorType=ListBox}}"
                        Value="true"
                     >
                        <Setter
                            TargetName="OuterPanel"
                            Property="Height"
                            Value="350"
                            />
                        <Setter
                            TargetName="OuterPanel"
                            Property="Width"
                            Value="225"                                
                            />
                    </DataTrigger>
                    <DataTrigger 
                        Binding="{Binding DataContext.MakeItemsLarge, RelativeSource={RelativeSource AncestorType=ListBox}}"
                        Value="false"
                     >
                        <Setter
                            TargetName="OuterPanel"
                            Property="Height"
                            Value="315"
                            />
                        <Setter
                            TargetName="OuterPanel"
                            Property="Width"
                            Value="200"
                            />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 1

向主视图模型添加属性，该视图模板拥有ListBox中的项目。看起来你正在做代码背后的一切，但你不应该。

#region MakeItemsLarge Property
private bool _makeItemsLarge = false;
public bool MakeItemsLarge
{
    get { return _makeItemsLarge; }
    set
    {
        if (value != _makeItemsLarge)
        {
            _makeItemsLarge = value;
            OnPropertyChanged();
        }
    }
}
#endregion MakeItemsLarge Property

现在为DataTemplate添加一个触发器来控制大小，并为StackPanel x:Name提供一个<DataTemplate> <StackPanel x:Name="OuterPanel" Margin="5" HorizontalAlignment="Center"> <Image Margin="3" Source="{Binding path}" MouseDown="ImageClick_MouseDown" /> <TextBlock TextAlignment="Center" Text="{Binding name}"/> </StackPanel> <DataTemplate.Triggers> <DataTrigger Binding="{Binding DataContext.MakeItemsLarge, RelativeSource={RelativeSource AncestorType=ListBox}}" Value="True" > <Setter TargetName="OuterPanel" Property="Height" Value="400" /> </DataTrigger> </DataTemplate.Triggers> </DataTemplate>，以便触发器在设置大小时可以引用它。

MakeItemsLarge

现在我们如何到达DataTemplate属性：在name中，默认情况下绑定绑定到项的属性 - 具有path属性的事物和MakeItemsLarge财产。但DataContext是父 viewmodel的属性，即拥有名称/路径项集合的视图模型。该viewmodel是ListBox的{{1}}，因此我们去那里寻找它。

如果您绝对拒绝对MVVM做任何事情，我可以告诉您如何MakeItemsLarge DependencyProperty窗口或用户控件或任何类型的视图包含ListBox，以及然后如何使用RelativeSource绑定到视图本身的属性。

这是另一个不需要viewmodel的选项：

这在视图中的某处：

<CheckBox
    x:Name="ChkLargeness"
    Content="Toggle Item Largeness"
    />

Binding上的DataTrigger更改为直接获取该复选框的已检查状态。关于DataTemplate的其他所有内容仍然如上所述。

<DataTrigger 
    Binding="{Binding IsChecked, ElementName=ChkLargeness}"
    Value="True"
    >

另外，如何返回列表框项目的当前大小？

您可能并不真正需要这些信息。但它将是ActualSize实例的ListBoxItem属性。有可能与ActualSize中StackPanel的{{1}}值相同。

更新

由于DataTemplate是MakeItemsLarge的子类的成员，而不是viewmodel，所以让它成为依赖属性而不是上面的INPC / viewmodel属性：

Page

并且如此绑定。请注意，它不是ListBox的数据上下文的属性。它是#region MakeItemsLarge Property public bool MakeItemsLarge { get { return (bool)GetValue(MakeItemsLargeProperty); } set { SetValue(MakeItemsLargeProperty, value); } } public static readonly DependencyProperty MakeItemsLargeProperty = DependencyProperty.Register(nameof(MakeItemsLarge), typeof(bool), typeof(MovieChooser), new PropertyMetadata(false)); #endregion MakeItemsLarge Property本身的属性。

Page

调整WPF中的列表框项目大小

1 个答案:

更新