wpf - 图像选择画布

Question

Acutally 我正在做一个 WPF 应用程序，用户可以Image从面板中进行选择。面板内部有两个Button（右箭头和左箭头）。我不确定面板的名称是什么，但我在我的问题中附上了一张图片。所以，我想问我如何创建面板？使用画布并将图像放在画布内？嗯...和按钮，我完全没有任何理想的方法。

p/s: 我是wpf新手

图片：

Answer 1

Here is one way to do it, using the standard ListBox control:

First, we need a pair of Previous/Next buttons and a ListBox. We make the ListBox lay out its items horizontally by changing its ItemsPanel:

<DockPanel Width="200" >
    <Button x:Name="_prev" Content="&lt;&lt;" />
    <Button x:Name="_next" Content="&gt;&gt;" DockPanel.Dock="Right" />

    <ListBox x:Name="_myList" Loaded="OnMyListLoaded" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <TextBlock Text="Image1  " />
        <TextBlock Text="Image2  " />
        <TextBlock Text="Image3  " />
        <TextBlock Text="Image4  " />
        <TextBlock Text="Image5  " />
        <TextBlock Text="Image6  " />
        <TextBlock Text="Image7  " />
    </ListBox>
</DockPanel>

In the ListBox' Loaded event, we use VisualTreeHelper to search through its Template and find its built-in ScrollViewer. Once we find it, we hook it up to the two buttons we created:

private void OnMyListLoaded(object sender, RoutedEventArgs e)
{
    var scroller = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(_myList, 0), 0) as ScrollViewer;
    if (scroller != null)
    {
        _prev.Command = ScrollBar.LineLeftCommand;
        _prev.CommandTarget = scroller;

        _next.Command = ScrollBar.LineRightCommand;
        _next.CommandTarget = scroller;

        scroller.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
    }
}

Answer 2

这可能会帮助您：

<Grid>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>

     <Button Name="LeftB" Grid.Column="0" />
     <Button Name="RightB" Grid.Column="2" />
     <StackPanel Orientation="Horizontal" Name="Images" Grid.Column="1" />
</Grid>

图像可以是 StackPanel 的子项。
当然，您应该将图像的大小设置为图像数量和 StackPanel 宽度的函数。最好的方法可能是处理 StackPanel 的宽度更改事件。