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

Question

我已经用Images填充了Listview，我想用滑块动态更改Images的大小。我还找不到任何解决办法。我该怎么做？

<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>

我希望这能有所帮助！