使用滑块控件动态更改数据模板内的图像宽度

Question

我已经用图像填充了一个列表视图，我想使用滑块动态更改图像的大小。我还找不到任何解决方案。我该怎么做？

        <ListView ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Width="{Binding ElementName=Windowdefault, Path=ActualWidth}" Margin="5" MouseDoubleClick="TvBox_MouseDoubleClick" x:Name="TvBox"  VerticalAlignment="Top">
        <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Wrapalign:AlignableWrapPanel HorizontalContentAlignment="Center" HorizontalAlignment="Center" ScrollViewer.HorizontalScrollBarVisibility="Disabled"    />
                </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>                  
                <StackPanel x:Name="stack"  Margin="0 0 0 0" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <StackPanel Margin="-25 -8 -25 -5">
                        <Image  Width="100" x:Name="ImagesGrid"  Source="{Binding ID,Converter={StaticResource ImagePathConverter}}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="UniformToFill" />
                        <TextBlock x:Name="ID" HorizontalAlignment="Center" FontWeight="Light" Text="{Binding ID}"  VerticalAlignment="Bottom" />
                    </StackPanel>
                    <TextBlock Visibility="Collapsed"  x:Name="Flname" MaxWidth="60" TextAlignment="Center" FontSize="7" TextWrapping="Wrap" HorizontalAlignment="Center" FontWeight="Light" Text="{Binding Name}"  VerticalAlignment="Bottom" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>

Answer 1

这很容易完成。

以您的代码为起点，我添加了 Slider 和 x:Name="Slider"。在 DataTemplate 中，我将 Image 上的绑定设置为 Slider 的 Value。

Slider 有一个 Minimum="100" 和 Maximum="1000" 的例子。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Slider x:Name="Slider"
        Grid.Row="0"
        Interval="1"
        Maximum="1000"
        Minimum="100"
        Value="100" />
    <ListView
        Grid.Row="1"
        Margin="5"
        VerticalAlignment="Top"
        ItemsSource="{Binding Images}"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel
                    Margin="0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Orientation="Vertical">
                    <StackPanel>
                        <Image x:Name="ImagesGrid"
                            Width="{Binding ElementName=Slider, Path=Value}"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Top"
                            Source="{Binding Image}"
                            Stretch="UniformToFill" />
                        <TextBlock x:Name="ID"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Bottom"
                            FontWeight="Light"
                            Text="{Binding Name}" />
                    </StackPanel>
                    <TextBlock
                        MaxWidth="60"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Bottom"
                        FontSize="7"
                        FontWeight="Light"
                        Text="{Binding FileName}"
                        TextAlignment="Center"
                        TextWrapping="Wrap"
                        Visibility="Collapsed" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

希望对您有所帮助！

使用滑块控件动态更改数据模板内的图像宽度

Changing image width inside datatemplate dynamically with a slidercontrol

data-binding

wpf

wpf-controls