C #, WPF, Autorezise Listbox при изменении размера окна

Question

C #, Visual Studio 2010, точка 4, WPF, Microsoft Ribbon

У меня есть окно WPF с меню ленты в верхней части окна и областью ниже где я пытаюсь заполнить мои элементы управления, однако я не могу получить элементы управления, чтобы изменить с мое окно.

Список в приведенном ниже примере должен быть полностью «расширен» за его границы, когда окно появляется, и его ширина должна соответствовать ширине окна, когда пользователь изменяет размер окна (пользователь не должен сам изменять размеры элементов управления), перетаскивая его по сторонам окна.

Я много пытался поиграть с элементами управления и искал в Интернете, но не смог найти решение (какой-то сайт указал, что использование границы поможет).

Image image1 - это фоновое изображение, охватывающее всю «поверхность». Image image2 - это маленький логотип.

<DockPanel DockPanel.Dock="Top">
    <Grid DockPanel.Dock="Top" Height="526" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2"  Name="BaseGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1" />
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Source="........./el_bg.jpg" Stretch="None" />
        <Grid  Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <Image  Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Source="........./shiny_rgb.png" />
            <ListBox Grid.Column="2" Grid.Row="0" Name="MessageToUser" VerticalAlignment="Top" />
        </Grid>
    </Grid>
</DockPanel>

Привет

Answer 1

Вы устанавливаете горизонтальное выравнивание на Left, которое не должно быть установлено.Попробуйте это:

<DockPanel DockPanel.Dock="Top">
    <Grid DockPanel.Dock="Top" Height="526" VerticalAlignment="Top" Margin="2"  Name="BaseGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1" />
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Left" Name="image1" VerticalAlignment="Top" Source="........./el_bg.jpg" Stretch="None" />
        <Grid  Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
            </Grid.RowDefinitions>
            <Image  Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Source="........./shiny_rgb.png" />
            <ListBox Grid.Column="2" Grid.Row="0" Name="MessageToUser" VerticalAlignment="Top">
                <ListBoxItem>One</ListBoxItem>
                <ListBoxItem>Two</ListBoxItem>
            </ListBox>
        </Grid>
    </Grid>
</DockPanel>

Кроме того, ваш ListBox находится в третьем столбце содержащей его сетки.Если вы хотите, чтобы оно растянулось по всему окну, вам нужно убедиться, что оно охватывает все три столбца:

<ListBox Grid.ColumnSpan="3" Grid.Row="0" Name="MessageToUser" 
         VerticalAlignment="Top">

Вы должны прочитать о Макет WPF - вы выбираете способздесь больше свойств, чем нужно.Как только вы поймете это, вы обнаружите, что это намного более интуитивно понятно.Кроме того, вы можете использовать такой инструмент, как Snoop , чтобы понять, что не так с вашим макетом.

Answer 2

Применение следующего стиля помогло мне выполнить это требование:

<Style x:Key="listBoxAutoFill" TargetType="ListBoxItem">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               Background="{TemplateBinding Background}" 
               Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
               <ContentPresenter HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch" 
                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
            <ControlTemplate.Triggers>
               <Trigger Property="IsSelected" Value="true">
                  <Setter Property="Background" TargetName="Bd" 
                     Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                  <Setter Property="Foreground" 
                     Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
               </Trigger>
               <MultiTrigger>
                  <MultiTrigger.Conditions>
                     <Condition Property="IsSelected" Value="true"/>
                     <Condition Property="Selector.IsSelectionActive" Value="false"/>
                  </MultiTrigger.Conditions>
                  <Setter Property="Background" TargetName="Bd" 
                     Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                  <Setter Property="Foreground" 
                     Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
               </MultiTrigger>
               <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Foreground" 
                     Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

Мое требование больше касается изменения высоты списка при увеличении / уменьшении окна, но то же самое можно применить к ширине.

<ListBox Grid.Row="1" Grid.Column="0" Width="158" 
   ItemContainerStyle="{StaticResource listBoxAutoFill}" 
   ItemsSource="{Binding ListBoxItems, Mode=TwoWay}" />