C#，WPF，窗口调整大小时自动调整列表框

C#，Visual Studio 2010，dot 4，WPF，Microsoft Ribbon

我有一个WPF窗口，窗口顶部有功能区菜单，下面有一个区域 当我试图用我的控件填充时，我无法使用控件 我的窗户

当窗口出现时，下面示例中的列表框应在其边界内完全“展开”，并且当用户调整窗口大小时，其宽度应跟随窗口宽度 （用户不应调整控件本身的大小）通过在窗口两侧拖动

我尝试了很多控件，搜索了很多网页，但都没能找到 找到一个解决方案（一些网站表示使用border就可以了）

图像图像1

是横跨整个“表面”的背景图像。

图像图像2

是一个小徽标图片

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

---

关于

您正在将水平对齐设置为不应设置的

左侧

。试试这个：

<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 Grid.ColumnSpan="3" Grid.Row="0" Name="MessageToUser" 
         VerticalAlignment="Top">

---

你应该仔细阅读-你在这里设置的属性比你需要的多得多。一旦你明白了，你会发现这件事更直观。此外，您可以使用类似的工具来帮助找出布局的错误。

您正在将不应设置的水平对齐设置为

左侧。试试这个：

<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 Grid.ColumnSpan="3" Grid.Row="0" Name="MessageToUser" 
         VerticalAlignment="Top">



你应该仔细阅读-你在这里设置的属性比你需要的多得多。一旦你明白了，你会发现这件事更直观。此外，您可以使用类似的工具来帮助找出布局的错误。
应用以下样式帮助我满足了此要求：

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

应用以下样式可帮助我满足此要求：

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


我无法从您的Xaml计算出您希望它是什么样子（它在Kaxaml中也不能很好地呈现）。似乎有一个背景图像，一个图标（左上角？）和图标右侧的一个列表框，然后剩下的空间大概是留给进一步的内容。是这样吗？您是否希望
列表框
占据水平轴、垂直轴或两者上的所有可用空间？我无法从您的Xaml计算出您希望它看起来是什么样子（它在Kaxaml中也不能很好地渲染）。似乎有一个背景图像，一个图标（左上角？）和图标右侧的一个列表框，然后剩下的空间大概是留给进一步的内容。是这样吗？您是否希望
列表框
占用水平轴、垂直轴或两者上的所有可用空间？