使用滑块控件动态更改datatemplate内的图像宽度

Question

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

        <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

这很容易实现。

使用您的代码作为起点，我添加了一个带有x:Name="Slider"的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>

我希望这能帮到你!