क्षैतिज अभिविन्यास

Question

के साथ आइटम नियंत्रण क्या आप आइटम्स कंट्रोल से विरासत में प्राप्त किसी भी नियंत्रण को जानते हैं जिसमें वस्तुओं का क्षैतिज अभिविन्यास है?

Answer 1

सीधे शब्दों में पैनल आइटम की मेजबानी करने के लिए इस्तेमाल बदलने के लिए:

<ItemsControl ...> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Answer 2

शीर्ष जवाब अच्छा है, लेकिन मैं इसे UserControls के साथ काम करने के लिए नहीं मिल सकता है। अगर आपको UserControls की आवश्यकता है, तो इससे मदद मिलनी चाहिए।

ItemsControl with Horizontal Usercontrols

मेरे संस्करण:

<Window.Resources> 
    <DataTemplate x:Key="ItemTemplate2"> 
     <StackPanel> 
      <uc:MyUserControl MinWidth="20" BorderBrush="Black" BorderThickness="0.1" /> 
     </StackPanel> 
    </DataTemplate> 

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1"> 
     <StackPanel Orientation="Horizontal" Margin="0,0,0,0"/> 
    </ItemsPanelTemplate> 
</Window.Resources> 

<StackPanel> 
    <ItemsControl x:Name="list_MyControls" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Margin="0,8,0,0" 
        ItemTemplate="{StaticResource ItemTemplate2}" 
        ItemsPanel="{StaticResource ItemsPanelTemplate1}" /> 
</StackPanel> 

डेटा के लिए बाध्य करने के लिए, आप के पीछे XAML या कोड में ItemsControl के लिए एक ItemsSource जोड़ने की आवश्यकता होगी। यह भी ध्यान रखें कि uc: फ़ाइल के शीर्ष पर घोषित xmlns:uc="NamespaceOfMyControl" होगा।

Answer 3

जबकि प्रचारित उत्तर बढ़िया है, यहां एक विकल्प है यदि आप आइटम को खींचना चाहते हैं।

<ItemsControl.ItemsPanel>        
    <ItemsPanelTemplate> 
     <UniformGrid Rows="1" /> 
    </ItemsPanelTemplate> 
</ItemsControl.ItemsPanel> 

Answer 4

यह एक उदाहरण है कि आइटम्स कंट्रोल के भीतर क्षैतिज स्क्रॉलिंग कैसे करें।

सबसे पहले मुख्य विंडो व्यूमोडेल क्लास उन वस्तुओं की सूची प्राप्त करने/सेट करने के लिए उपयोग की जाती थी जिन्हें हम प्रदर्शित करना चाहते हैं।

MainWindowViewModel.cs

using System.Collections.Generic; 

namespace ItemsControl 
{ 
    public class Item 
    { 
     public Item(string title) 
     { 
     Title = title; 
     } 

     public string Title { get; set; } 
    } 

    public class MainWindowViewModel 
    { 
     public MainWindowViewModel() 
     { 
     Titles = new List<Item>() 
     { 
      new Item("Slide 1"), 
      new Item("Slide 2"), 
      new Item("Slide 3"), 
      new Item("Slide 4"), 
      new Item("Slide 5"), 
      new Item("Slide 6"), 
      new Item("Slide 7"), 
      new Item("Slide 8"), 
     }; 
     } 

     public List<Item> Titles { get; set; } 
    } 
} 

दृश्य के लिए मुख्य विंडो XAML:

MainWindow.xaml

<Window x:Class="ItemsControl.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:ItemsControl"  
     mc:Ignorable="d" 
     Title="MainWindow" Height="400" Width="400"> 

    <Window.DataContext> 
     <local:MainWindowViewModel /> 
    </Window.DataContext> 

    <Grid Margin="5"> 
     <ScrollViewer 
      VerticalScrollBarVisibility="Disabled" 
      HorizontalScrollBarVisibility="Auto"> 

      <ItemsControl 
       x:Name="SearchResultList"     
       ItemsSource="{Binding Titles}"> 

       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel Orientation="Vertical"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Border 
          Margin="5" 
          BorderThickness="1" 
          BorderBrush="Aqua"> 

          <TextBlock 
           Text="{Binding Title}" 
           HorizontalAlignment="Center"        
           VerticalAlignment="Top" 
           FontSize="12" 
           TextWrapping="Wrap" 
           TextAlignment="Center" 
           FontWeight="DemiBold" 
           Width="150" 
           Height="150" /> 
         </Border> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 

      </ItemsControl> 
     </ScrollViewer> 

    </Grid> 
</Window> 

कैसे उच्च/विस्तृत अपने ग्राहक क्षेत्र पर निर्भर करता है , इसका परिणाम इस तरह के लेआउट में होगा, ओवरफ्लो आइटम क्षैतिज स्क्रॉल किए गए हैं:

अधिक जानकारी इस ब्लॉग लिंक पर पाया जा सकता, कैसे करना है पर इसका उदाहरण भी खड़ी स्क्रॉल:

http://www.technical-recipes.com/2017/how-to-orient-wrappanel-items-within-itemscontrol-lists-vertically-and-horizontally/