ListBox ItemTemplate को क्षैतिज रूप से ListBox की पूरी चौड़ाई को फैलाने के लिए कैसे प्राप्त करें?


356

मैं उनकी नारंगी पृष्ठभूमि के साथ Listbox की पूरी चौड़ाई का विस्तार करने के लिए ListItems रखना चाहता हूं।

वर्तमान में वे केवल FirstName + LastName जैसे ही विस्तृत हैं।

मैंने हर वह तत्व निर्धारित किया है जो मैं कर सकता हूँ: HoroscopeAlignment = "Stretch"।

मैं चाहता हूं कि सूची बॉक्स की पृष्ठभूमि का विस्तार हो, क्योंकि उपयोगकर्ता सूची बॉक्स को खींचता है, इसलिए मैं पूर्ण मूल्यों में नहीं डालना चाहता।

मुझे क्या करना होगा ताकि सूची बॉक्स की पृष्ठभूमि का रंग सूची बॉक्स की चौड़ाई को भर दे?

<Window x:Class="TestListBoxSelectedItemStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="CustomerItemTemplate">
            <Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
                    <TextBlock HorizontalAlignment="Stretch">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
                 ItemTemplate="{StaticResource CustomerItemTemplate}"/>
    </Grid>
</Window>

जवाबों:


468

मुझे यकीन है कि यह एक डुप्लिकेट है, लेकिन मैं एक ही जवाब के साथ एक सवाल नहीं पा सकता हूं।

HorizontalContentAlignment="Stretch"अपने ListBox में जोड़ें । यह ट्रिक काम आना चाहिए। बस ऑटो-पूर्ण के साथ सावधान रहें क्योंकि HorizontalAlignmentगलती से प्राप्त करना इतना आसान है ।


1
@ चंचल जेडी, क्या आपको एक समाधान का पता है जब आपके पास कस्टम लिस्टबॉक्स आइटम हैं? उस मुद्दे पर खुद चल रहे हैं।
9:11

11
वास्तव में यह समाधान किसी कारण से सिल्वरलाइट में काम नहीं करता है। दूसरी ओर गेब्रियल का समाधान करता है
टिमोथी

6
यह WinRT ListView नियंत्रण पर काम नहीं करता है। मैंने पहले ही कोशिश कर ली है।
uSeRnAmEhAhAhAhAhAhA

3
यह कस्टम सूचियों (विंडोज, सिल्वरलाइट नहीं) पर ठीक काम करता है, बस xaml लिखते समय ऑटो पूर्ण से सावधान रहें। यदि आप "Horiz .." लिखते हैं, तो आपको "HoroscopeAlignment" मिलेगा न कि "HoroscopeContentAlignment"। पहले सुझाव का चयन करना बहुत आसान है, क्योंकि दोनों "स्ट्रेच" का उपयोग कर रहे हैं।
जार्ले ब्योर्नबेथ

1
कस्टम आइटम मेरे लिए काम करते हैं अगर मैं ऑटो के लिए कस्टम आइटम की चौड़ाई निर्धारित करता हूं।
लैंसफ्लारे

646

मैं यहाँ एक और समाधान मिला , क्योंकि मैं दोनों पोस्ट में भाग गया ...

यह Myles जवाब से है:

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

इसने मेरे लिए काम किया।


@CameronMacFarland कम से कम मेरे मामले में सिल्वरलाइट का कारण, यह है कि आईटी एडमिन स्टाफ यह पता नहीं लगा सका कि सक्रिय निर्देशिका का उपयोग करके WPF / Winform एप्लिकेशन को कैसे तैनात किया जाए, और हम एक साफ परिनियोजन परिदृश्य चाहते थे जो हम पर निर्भर न हो। अद्यतन।
रिचर्ड बी

@RichardB lol मेरी टिप्पणी सिल्वरलाइट पर अधिक निर्देशित थी, क्योंकि सिल्वरलाइट अलग क्यों होनी चाहिए, और WPF की तुलना में एक टूटा हुआ टेम्पलेट है।
कैमरून मैकफारलैंड

@CameronMacFarland आह ... कोई चिंता नहीं। सिल्वरलाइट ऐप करने के बाद, और ServiceReferences.ClientConfig फ़ाइल के साथ संघर्ष करने के बाद, मैं सेट कर रहा हूं कि मैं (प्लेग की तरह) कभी भी दूसरे सिल्वरलाइट एप्लिकेशन को फिर से विकसित करने से बचूंगा। यह एक अच्छा विचार था, लेकिन सिर्फ प्रभावशाली नहीं था।
रिचर्ड बी

1
किसी सूची के भीतर डेटा टेम्प्लेट के लिए काम करने के लिए इसे देखें: <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <सेटर प्रॉपर्टी = "हॉरिज़ॉन्टल कॉन्टेंटअलाइनमेंट" मान = "स्ट्रेच"> </ सेटर> </ स्टाइल> </ ListView .ItemContainerStyle>
क्रिस्टोफर कुक

त्रुटि: बाइंडिंगएक्सप्रेशन पथ त्रुटि: 'चौड़ाई' गुण प्रोजेक्ट पर नहीं मिली है। CustomElement, Project.WindowsPhone, संस्करण = 1.0.0.0, संस्कृति = तटस्थ, PublicKeyToken = null '। बाइंडिंग एक्सप्रेशन: पथ = 'चौड़ाई' DataItem = Project.CustomElement, Project.WindowsPhone, संस्करण = 1.0.0.0, संस्कृति = तटस्थ, PublicKeyToken = null '; लक्ष्य तत्व 'Windows.UI.Xaml.Controls.Grid' (नाम = 'null') है; लक्ष्य संपत्ति 'चौड़ाई' (टाइप 'डबल')
ब्लैक सिड

72

यदि आपके आइटम की तुलना में व्यापक हैं ListBox, तो यहां दिए गए अन्य उत्तर मदद नहीं करेंगे: आइटम, की ItemTemplateतुलना में व्यापक बने रहेंगे ListBox

मेरे लिए काम करने वाली फिक्स क्षैतिज स्क्रॉलबार को अक्षम करने के लिए थी, जो, जाहिरा तौर पर, उन सभी वस्तुओं के कंटेनर को भी सूची बॉक्स के रूप में व्यापक रूप से बने रहने के लिए कहता है।

इसलिए सूची बॉक्स के रूप में चौड़े हैं, चाहे वे छोटे हैं और स्ट्रेचिंग की जरूरत है, या व्यापक और लपेटने की जरूरत है, इस प्रकार है:

<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

( स्क्रॉल बार विचार के लिए क्रेडिट )


0

चूंकि सीमा का उपयोग केवल दृश्य उपस्थिति के लिए किया जाता है, आप इसे ListBoxItem के ControlTemplate में डाल सकते हैं और वहां गुणों को संशोधित कर सकते हैं। ItemTemplate में, आप केवल StackPanel और TextBlock रख सकते हैं। इस तरह, कोड भी साफ रहता है, क्योंकि नियंत्रण की उपस्थिति में ControlTemplate के माध्यम से नियंत्रित किया जाएगा और दिखाया जाने वाला डेटा DataTemplate के माध्यम से नियंत्रित किया जाएगा।


0

मेरे लिए ठीक सेट संपत्ति के लिए गया था HorizontalAlignment="Stretch"पर ItemsPresenterअंदरScrollViewe r ।

आशा है कि यह किसी की मदद करता है ...

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
                        <ItemsPresenter  Height="252" HorizontalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

0

मुझे भी यही समस्या थी, एक त्वरित समाधान के रूप में, मैंने यह निर्धारित करने के लिए मिश्रण का उपयोग किया कि कितना पैडिंग जोड़ा जा रहा था। मेरे मामले में यह 12 था, इसलिए मैंने इससे छुटकारा पाने के लिए एक नकारात्मक मार्जिन का उपयोग किया। अब सब कुछ अब ठीक से केंद्रित हो सकता है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.