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

Question

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

Answer 1

केवल आइटम को होस्ट करने के लिए उपयोग किए जाने वाले पैनल को बदलें:

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

Comments

क्या आपको StackPanel में IsItemsHost = "True" जोड़ने की आवश्यकता नहीं है?

— थॉमस लेवेस्क

मेरा मानना ​​है कि केवल तभी आवश्यक है जब आप संपूर्ण नियंत्रण को फिर से टेम्पलेट कर रहे हों। देखें msdn.microsoft.com/en-us/library/...

— केंट Boogaart

उत्तर भी सिल्वरलाइट के लिए है

— स्कॉट

संसाधन फ़ाइल में यह कैसे करें?

— फ्लोरियन

संसाधन फ़ाइल में ऐसा करने के लिए, आपको x: कुंजी कुंजी

— Tore Aurstad

Answer 2

जबकि प्रचारित उत्तर बहुत अच्छा है, यहाँ एक विकल्प है यदि आप आइटम को फैलाना चाहते हैं।

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

Comments

यदि आप UWP का उपयोग कर रहे हैं, तो आपको यहाँ से UWP-UniformGrid की आवश्यकता होगी: github.com/rickapps/UWP-UniformGrid-Control । मैंने अभी इसे प्लस NielW के समाधान के ऊपर लागू किया है। वास्तव में आसान है और समस्या को हल करता है।

— गेल फाद

Answer 3

शीर्ष उत्तर अच्छा है, लेकिन मैं इसे UserControls के साथ काम नहीं कर सका। यदि आपको 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>

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

Comments

मुझे WPF का उपयोग करने की आदत नहीं है, इसलिए शायद मैं जो कहूंगा वह बहुत ही मूल सामग्री है। मुझे पता चला कि एक UserControl के अंदर आपको "Window.Resources" के बजाय "UserControl.Resources" का उपयोग करना चाहिए। वैसे भी, महान जवाब के लिए धन्यवाद, मेरी समस्या हल हो गई।

— पाउलो आंद्रे हाके

Answer 4

यह कैसे एक ItemControl के भीतर क्षैतिज स्क्रॉल करने का एक उदाहरण है।

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

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/