wpf - 画像選択キャンバス

Question

実際、私はユーザーがImageパネルから選択できるWPFアプリケーションを実行しています。パネル内には2つありますButton（右矢印と左矢印）。パネルの名前はわかりませんが、質問に画像を添付します。では、どうすればパネルを作成できますか？キャンバスを使用して、画像をキャンバス内に配置しますか？うーん...そしてボタン、私はそれを行うための理想的な方法をまったく持っていません。

p / s：私はwpf初心者です

画像：

Answer 1

標準のListBoxコントロールを使用して、これを行う1つの方法を次に示します。

まず、前へ/次へボタンのペアとリストボックスが必要です。ItemsPanelを変更して、ListBoxにアイテムを水平方向にレイアウトさせます。

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

ListBoxのLoadedイベントでは、VisualTreeHelperを使用してテンプレートを検索し、組み込みのScrollViewerを見つけます。見つかったら、作成した2つのボタンに接続します。

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の幅変更イベントを処理することです。