Почему мой элемент управления WPF Rectangle не заполняет все пустое пространство StackPanel? - PullRequest
Новая
       64

Почему мой элемент управления WPF Rectangle не заполняет все пустое пространство StackPanel?

0 голосов
/ 11 июля 2019

Изучение основных понятий WPF до перехода на UWP. Следующий XAML в моем проекте WPF показывает окна, как показано ниже.

Я пытаюсь отобразить Rectangle и Button справа от StackPanel и мне нужен элемент управления Rectangle (не кнопка) для автоматического заполнения StackPanel.

Я попробовал HorizontalAlignment="Stretch" без атрибута Width, но без атрибута Width весь прямоугольник сжимается до 0 ширины. Не нужно жестко кодировать значение ширины (если возможно), чтобы окно приложения настраивалось в зависимости от устройства, на котором оно включено (разрешение экрана). Но если этот сценарий все еще возможен с жестко заданным значением ширины, пожалуйста, дайте мне знать об этом подходе.

Окно

enter image description here

XAML

Замечание : Я не думаю, что ListBox играет какую-либо роль (связана с этим постом). Только элементы управления внутри ListItemsControl над ListBox, вероятно, нуждаются в правильной настройке. но я могу ошибаться. 

<Window x:Class="WPFProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="376"
        Width="337">
    <Grid>
        <ItemsControl>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Height="10">
                <Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Right" Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"  RenderTransformOrigin="0.533,0.6"/>
                <Button Content="&#xE1FD;" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
            </StackPanel>
        </ItemsControl>
        <ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,11,0,81" ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="myList" SelectionChanged="myList_ContextMenuClosing">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding FirstName}" ToolTip="{Binding FullName}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button x:Name="btnTest" Content="Test" HorizontalAlignment="Left" Margin="250,298,0,0" VerticalAlignment="Top" Width="75" Click="BtnTest_Click"/>
    </Grid>
</Window>

Ответы [ 2 ]

2 голосов
/ 11 июля 2019

Здесь есть две вещи:

  1. Когда вы используете стекпанель с горизонтальной ориентацией, horizontalalingment="stretch" использовать нельзя.Это связано с тем, что все элементы укладываются с заданной шириной.

  2. Вы указываете фиксированный width из 100 для своего прямоугольника.Если вы сделаете это, он больше не будет растягиваться, даже если вы используете stretch для выравнивания.Также horizontalalingment="stretch" необходимо разместить на элементе, который вы ожидаете растянуть, а не на панели.

Для подобных вещей используйте вместо этого DockPanel или Grid.Подробнее о панелях WPF можно прочитать здесь: https://wpf -tutorial.com / Panel / Введение-в-wpf-Panel /

Вот пример для Grid: 

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Stretch" Height="9" Margin="0,0,0,0" 
            Stroke="Black" VerticalAlignment="Top"  RenderTransformOrigin="0.533,0.6" Grid.Row="0"/>
    <Button Content="&#xE1FD;" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold" Grid.Column="1"/>
</Grid>

Обратите внимание, что атрибут width="*" означает, что ячейка будет использовать все оставшееся пространство.Если у вас есть несколько строк / столбцов, определенных с *, пробел будет разделен между ними.

0 голосов
/ 11 июля 2019

Панель стека действует как стопка вещей, размещенных одна за другой.Это может быть горизонтальным или вертикальным.В отличие от Grid, вы не можете получить доступ к определенному месту на панели стека, каждый следующий элемент будет размещен в последовательности друг за другом. Для вашего требования StackPanel не подходит, если вам не нужна горизонтальная прокрутка.Вы должны попробовать DockPanel или Grid вместо 

           <Grid   Height="10">                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <!--first column of grid-->
                <Rectangle Grid.Column="0" x:Name="myRectangle" Fill="#FFF4F4F5"  Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top"   RenderTransformOrigin="0.533,0.6"/>
                <!--second column of grid-->
                <Button Grid.Column="1" Content="&#xE1FD;" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
            </Grid>
...