source

항목을 수평으로 배치하는 WPF ListBox

manycodes 2023. 5. 26. 21:11
반응형

항목을 수평으로 배치하는 WPF ListBox

선택한 이미지를 표시하기 위한 WPF 애플리케이션을 작성하려고 합니다.창 상단에 있는 배너에 사용 가능한 모든 이미지를 표시하고 추가 처리를 위해 기본 창에 선택한 이미지를 표시합니다.

왼쪽에 있는 목록에서 이미지를 수직으로 표시하려면 데이터 바인딩을 사용하여 매우 우아하게 작업을 수행할 수 있습니다.

    <ListBox 
        Name="m_listBox"
        IsSynchronizedWithCurrentItem="True"
        ItemsSource="{Binding}"            
        >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Width="60" Stretch="Uniform" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

이것을 수직이 아닌 수평으로 만들 수 있는 간단한 방법이 있습니까?솔루션의 주요 요구 사항은 다음과 같습니다.

  • 항목은 데이터 바인딩을 사용하여 채워집니다.
  • 선택한 항목은 사용자가 클릭하기만 하면 변경됩니다.

줄 바꿈

 <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem>listbox item 1</ListBoxItem>
    <ListBoxItem>listbox item 2</ListBoxItem>
    <ListBoxItem>listbox item 3</ListBoxItem>
    <ListBoxItem>listbox item 4</ListBoxItem>
    <ListBoxItem>listbox item 5</ListBoxItem>
</ListBox>

WPF 자습서

기본값ItemsPanel를 위해ListBox컨트롤은VirtualizingStackPanel따라서 컨트롤에 대해 일반적인 기본 경험을 원하지만 수평으로 배치하려면 이를 지정하고 방향을 변경해야 합니다.

예:

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

다음은 스택 패널의 예입니다.Mvm 바인딩이 있는 수평 빵 부스러기

 <ItemsControl
            x:Name="tStack"
            Grid.Row="1"
            Grid.Column="0"
            Height="40"
            Background="Red"
            ItemsSource="{Binding BreadCrumbs}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button
                        Margin="5"
                        CommandParameter="{Binding .}"
                        Command="{Binding BreadcrumbClickCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.BreadcrumbClickCommand}"
                        Content="{Binding Name}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

언급URL : https://stackoverflow.com/questions/1292516/wpf-listbox-that-lays-out-its-items-horizontally

반응형