c#, WPF,当窗口大小调整时自动调整列表框

本文关键字:调整 列表 窗口大小 WPF | 更新日期: 2023-09-27 18:05:18

c#、Visual Studio 2010、。net 4、WPF、Microsoft Ribbon

我有一个WPF窗口,功能区菜单在窗口的顶部,下面有一个区域我试图填补我的控制,但我不能得到控制调整我的窗户。

当窗口出现时,下面示例中的列表框应该在其边界内完全"展开",并且当用户调整窗口大小时,其宽度应该遵循窗口宽度(用户不应该调整控件本身的大小)通过拖动I在Windows的两侧。

我试了很多玩周围的控制和搜索网络,但没有能够找到一个解决方案(一些网站表示使用边框可以解决这个问题)。

Image image1是横跨整个"表面"的背景图像。Image image2为小logo图片。

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

c#, WPF,当窗口大小调整时自动调整列表框

您正在设置不应该设置的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这样的工具来帮助找出布局的问题。

应用下面的样式帮助我满足了这个要求:

<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}" />