برنامج الأغذية العالمي: مربع القائمة مع WrapPanel، مشكل التمرير الرأسي

Question

ولدي على UserControl (XAML أدناه) التي تحتوي على مربع القائمة التي أريد لعرض الصور داخل WrapPanel، حيث يتم عرض الصور ما يصل الى تناسب على صف واحد ثم التفاف على الصف التالي وما إلى ذلك يعمل، باستثناء عندما ينمو مربع القائمة أعلى من المساحة المتوفرة في النافذة، وأنا لا تحصل على شريط التمرير العمودي، أي محتويات الحصول على قص. إذا أنا وضعت على ارتفاع ثابت في مربع القائمة، يظهر شريط التمرير ويعمل كما هو متوقع. كيف يمكنني الحصول على هذا مربع القائمة ليصل إلى المساحة المتاحة ومن ثم إظهار شريط التمرير العمودي؟ هذه السيطرة هي داخل StackPanel داخل الشبكة في النافذة الرئيسية. إذا كنت التفاف StackPanel داخل ScrollViewer، وأحصل على شريط التمرير أنا بعد، ولكن هذا ليس حقا حلا جيدا إذا كنت أريد أن أضيف بعض المزيد من الضوابط لفي UserControl فوق مربع القائمة (على سبيل المثال حجم الصورة "تكبير" وما إلى ذلك) وأنا لا تريد منهم أن انتقل مع الصور.

والشكر !! :)

<UserControl x:Class="GalleryAdmin.UI.GalleryView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Background="LightGray" Margin="5" >
                    <StackPanel Margin="5">
                        <Image Source="{Binding Path=LocalThumbPath}" Height="100" />
                        <TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

Answer 1

حسنا، وأخيرا عثرت على الحل. كنت مضيفا بلدي UserControl إلى لوحة النائب الذي يشبه هذا:

            <ScrollViewer Margin="20" >
                <StackPanel Name="contentPanel"></StackPanel>
            </ScrollViewer>

ولكن، عندما تحول ذلك إلى الشبكة بدلا من ذلك، بدأت الأمور للعمل في الطريقة التي أردت:

<Grid Name="contentPanel" Margin="20" />

وأعتقد أن له علاقة مع StackPanel عدم اتخاذ كل المساحة العمودية افتراضيا، مثل الشبكة يقوم به.

Answer 2

وأعتقد أنك أفضل الذهاب مع تجاوز على ItemPanelTemplate:

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

Answer 3

وكان من المقرر كل ما كان علي القيام بما يلي، وذهب بعيدا المشكلة:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Answer 4

وكنت تبحث فقط من خلال عدة أسئلة حول هذه المسألة، وعلى الرغم من أن هذا هو موضوع القديم، هذا واحد أعطاني الجواب، ولكن فقط لتوضيح ....

ووGRID التخطيط هو الحل لمعظم القضايا من هذا القبيل. للحصول على مربع القائمة صحيح / عملية WrapPanel لملء الحيز المتاح، التعليمة البرمجية التالية لا حيلة:

                    <Grid Grid.Row="1" MaxHeight="105">
                        <ListBox ItemTemplate="{DynamicResource StoreGroupTemplate01}" ItemsSource="{Binding StoreGroupHeader}"
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                            <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        </ListBox>
                    </Grid>

ولدي هذا في شبكة أخرى لوضع القائمة في الجزء السفلي من الشاشة بلدي (أي .. وGrid.Row = "1") ويمكنك ضبط MaxHeight (أو إزالته) للسيطرة على المنطقة المرئية من قبل العمودي سوف شريط التمرير تظهر.

Answer 5

ووضع مربع القائمة الخاصة بك من داخل ScrollViewer ثم قم بتعيين خاصية VerticalScrollBarVisibility وscrollviewer إلى "تلقائي"

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Background="LightGray" Margin="5" >
                <StackPanel Margin="5">
                    <Image Source="{Binding Path=LocalThumbPath}" Height="100" />
                    <TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
</ScrollViewer>

و
HTH