数据网格宽度 WinUI 3

问题描述 投票:0回答:1

我是 WinUI 3 的新手,我正在做一个数据网格来显示产品列表,我想让数据网格列在总宽度不是完整数据网格宽度时填充数据网格,但如果总宽度则显示水平滚动列的宽度超过网格宽度。 我现在的网格 xaml 代码是这个:

 <Grid x:Name="ContainerGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="TableGrid" Grid.Column="0" HorizontalAlignment="Stretch" Margin="10,30,10,10" CornerRadius="5">
        <controls:DataGrid x:Name="MainDataGrid" LoadingRow="ColorRow" 
                           GridLinesVisibility="All" AutoGenerateColumns="False" 
                           VerticalAlignment="Stretch" Width="Auto" MinWidth="{Binding ActualWidth, ElementName=TableGrid}" 
                           HorizontalAlignment="Stretch" FrozenColumnCount="2"
                           Visibility="Visible">
            <controls:DataGrid.Columns>
                <controls:DataGridTemplateColumn Header="" Width="Auto">
                    <controls:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox 
                                IsChecked="{Binding Import}"
                                HorizontalAlignment="Center" 
                                VerticalAlignment="Center"  
                                Width="20" Height="20" MinHeight="20" MinWidth="20"/>
                        </DataTemplate>
                    </controls:DataGridTemplateColumn.CellTemplate>
                </controls:DataGridTemplateColumn>
                <controls:DataGridTemplateColumn Header="Foto" Width="Auto" IsReadOnly="True">
                    <controls:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Foto}" Width="100" Height="115" Stretch="Uniform"/>
                        </DataTemplate>
                    </controls:DataGridTemplateColumn.CellTemplate>
                </controls:DataGridTemplateColumn>
                <controls:DataGridTextColumn Header="Modelo" Binding="{Binding Modelo}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Código de Estilo" Binding="{Binding Codigo_Estilo}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Color" Binding="{Binding Color}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Descripción de Color" Binding="{Binding Descripcion_Color}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Talla" Binding="{Binding Talla}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Talla EU" Binding="{Binding Talla_EU}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Ancho" Binding="{Binding Ancho}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="EAN" Binding="{Binding EAN}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="SKU" Binding="{Binding SKU}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Stock" Binding="{Binding Cantidad_Disponible}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Stock Avelon" Binding="{Binding Avelon_Stock}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Familia" Binding="{Binding Familia}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <!--<controls:DataGridTextColumn Header="Uso" Binding="{Binding Uso}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>-->
                <controls:DataGridTextColumn Header="Categoría" Binding="{Binding Categoria}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="Temporada" Binding="{Binding Temporada}" Visibility="Collapsed" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
                <controls:DataGridTextColumn Header="País" Binding="{Binding Pais}" Width="Auto" IsReadOnly="True" ElementStyle="{StaticResource CenteredTextBlock}"/>
            </controls:DataGrid.Columns>

        </controls:DataGrid>
    </Grid>

    <Grid Grid.Column="1" HorizontalAlignment="Right" Width="225" Height="Auto" Margin="0,40,15,10" VerticalAlignment="Stretch">
        <StackPanel Grid.Row="0">
            <ComboBox x:Name="Brand_Selector" PlaceholderText="Selecciona una marca" Margin="10,10,10,10" HorizontalAlignment="Stretch" Height="Auto" SelectionChanged="ChangeBrand">
                <ComboBoxItem x:Name="NB" Width="225" IsSelected="True" HorizontalAlignment="Stretch">
                    <Image Source="Assets/NB Text.png" Width="Auto" Height="Auto" Stretch="Uniform"/>
                </ComboBoxItem>
                <ComboBoxItem x:Name="FLUCHOS" IsSelected="False" Width="225">
                    <Image Source="Assets/fluchos.png" Width="Auto" Height="Auto" Stretch="Uniform"/>
                </ComboBoxItem>
                <ComboBoxItem x:Name="TIMBERLAND" IsSelected="False" Width="225">
                    <Image Source="Assets/Timberland-logo.png" Width="Auto" Height="Auto" Stretch="Uniform"/>
                </ComboBoxItem>
            </ComboBox>
            <models:ButtonCustom Height="41" x:Name="SyncButton" Content="Sincronizar" Margin="10,10,10,10" VerticalAlignment="Top" HorizontalAlignment="Stretch" Click="SyncButton_Click">
                <Button.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Button.RenderTransform>
                <Button.Resources>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="5"/>
                    </Style>
                </Button.Resources>
            </models:ButtonCustom>
            <models:ButtonCustom Height="41" x:Name="OrdersButton" Content="Pedidos" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Stretch" Click="OrdersButton_Click">
                <Button.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Button.RenderTransform>
                <Button.Resources>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="5"/>
                    </Style>
                </Button.Resources>
            </models:ButtonCustom>
            <TextBlock Text="Fecha disponibilidad" FontSize="20pt" HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Top"/>
            <DatePicker x:Name="disponbilidadSelect" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
            <TextBlock Text="Stock mínimo" FontSize="20pt" HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Top"/>
            <NumberBox x:Name="MinimumStock" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="10" Text="20"></NumberBox>
            <Expander Header="Estados" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="10">
                    <StackPanel>
                        <CheckBox x:Name="pendant" Content="Pendientes" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="imported" Content="Ya importados" VerticalAlignment="Top" Margin="10"/>
                        <CheckBox x:Name="descarted" Content="Descartados" VerticalAlignment="Top" Margin="10"/>
                    </StackPanel>
                </Expander>
            <StackPanel x:Name="NB_Options">
                <Expander Header="Tamaños" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="10">
                    <StackPanel x:Name="NB_Size_Options">
                        <CheckBox x:Name="M" Content="M" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="B" Content="B" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="D" Content="D" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="W" Content="W" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="O" Content="Otros" VerticalAlignment="Top" Margin="10"/>
                    </StackPanel>
                </Expander>
            </StackPanel>
            <StackPanel x:Name="Fluchos_Options" Visibility="Collapsed">
                <Expander Header="Temporada" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="10">
                    <StackPanel x:Name="season_stack_panel">
                        <CheckBox x:Name="spring" Content="Primavera" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="summer" Content="Verano" VerticalAlignment="Top" Margin="10"/>
                        <CheckBox x:Name="autum" Content="Otoño" VerticalAlignment="Top" Margin="10"/>
                        <CheckBox x:Name="winter" Content="Invierno" VerticalAlignment="Top" Margin="10"/>
                    </StackPanel>
                </Expander>
                <Expander Header="Año" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="10">
                    <StackPanel x:Name="year_stack_panel">
                        <CheckBox x:Name="last_year" Content="2024" VerticalAlignment="Top" Margin="10" IsChecked="true"/>
                        <CheckBox x:Name="this_year" Content="2025" VerticalAlignment="Top" Margin="10"/>
                        <CheckBox x:Name="next_year" Content="2026" VerticalAlignment="Top" Margin="10"/>
                    </StackPanel>
                </Expander>
            </StackPanel>
        </StackPanel>
        <models:ButtonCustom Grid.Row="1" x:Name="SaveButton" Content="Importar" Padding="10,10" HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Bottom" Click="Button_Click" RenderTransformOrigin="1,0">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="5"/>
                </Style>
            </Button.Resources>
        </models:ButtonCustom>
    </Grid>

    
    <Grid x:Name="LoadingRing" Visibility="Collapsed" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <ProgressRing 
        Width="350" 
        Height="350"
        HorizontalAlignment="Center" 
        VerticalAlignment="Center"/>
    </Grid>
</Grid>

如果我将 Width="*" 设置为最后一列,当总宽度超过数据网格宽度时,它将不会显示水平滚动,而是会将最后一列缩小为空

有人可以帮助我吗?

编辑:我忘了提及。我正在使用 CommunityToolkit.WinUI.UI.Controls.DataGrid

c# xaml datagrid winui-3
1个回答
0
投票

HorizontalScrollBarVisibility 设置为

Auto
Visible
应该会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.