Question

是否有任何控件可以自动调整内部的项目。我需要在ItemsControl中只包含一行中的文本块，所以如果总项目宽度大于container.Width，它将改变每个项目的宽度。 UWP

<ItemsControl Grid.Column="1"
                          ItemsSource="{Binding Path=NavigationHistory, ElementName=Main, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                          x:Name="BroadComb"
                          MaxHeight="24"
                          Margin="10,0,0,0" VerticalAlignment="Center" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <HyperlinkButton Command="{Binding Path=NavigateCommand, ElementName=Main}" CommandParameter="{Binding}"  Margin="10,0,0,0" Foreground="{ThemeResource AppAccentForegroundLowBrush}" >
                            <HyperlinkButton.ContentTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock VerticalAlignment="Center" 
                                                   TextTrimming="None" 
                                                   Text="{Binding Path=DisplayName}" 
                                                   FontSize="10"
                                                   FontWeight="Bold"
                                                   Foreground="{ThemeResource AppAccentForegroundLowBrush}">
                                            <i:Interaction.Behaviors>
                                                <core:DataTriggerBehavior Binding="{Binding Path=CanBeTrim}" Value="True">
                                                    <core:ChangePropertyAction PropertyName="TextTrimming" Value="WordEllipsis"/>
                                                </core:DataTriggerBehavior>

                                                <core:DataTriggerBehavior Binding="{Binding Path=CanBeTrim}" Value="False">
                                                    <core:ChangePropertyAction PropertyName="TextTrimming" Value="None"/>
                                                </core:DataTriggerBehavior>
                                            </i:Interaction.Behaviors>
                                        </TextBlock>
                                        <FontIcon Margin="10,0,0,0" HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"
                                                  FontFamily="ms-appx:/Assets/Fonts/MyBook-Regular.ttf#MyBook"
                                                  FontSize="10"
                                                  Glyph="2" Foreground="{ThemeResource AppAccentForegroundLowBrush}" />
                                    </StackPanel>
                                </DataTemplate>
                            </HyperlinkButton.ContentTemplate>
                        </HyperlinkButton>

                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Answer 1

一种可能性是使用Grid将所需控件添加到其HorizontalAlignment="Stretch"列中

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="abc" HorizontalAlignment="Stretch" />
    <TextBlock Grid.Column="1" Text="xyz" HorizontalAlignment="Stretch" />
</Grid>

这将根据Grid的容器将两个控件拉伸到最大可用宽度，并在可用空间更改时使它们更小或更大。

大多数情况下，您只需要设置一列来填充可用空间（宽度=＆＃34; *＆＃34;）并将其他列设置为固定或相对宽度。您可以尝试这些设置。

否则，我们需要更准确地说明您想要实现的目标。

Answer 2

是否有任何控件可以自动调整内部的项目。我需要在ItemsControl中只包含一行中的文本块，所以如果总项目宽度大于container.Width，它将改变每个项目的宽度。 UWP

您需要更改GridView的默认ItemsPanel。您可以创建自己的自定义面板，以便将文本排列在一行中：

创建您自己的自定义面板OneRowPanel.cs：

public class OneRowPanel:Panel
{
    double itemHeight=0;
    protected override Size MeasureOverride(Size availableSize)
    {
        int count = Children.Count;
        foreach (FrameworkElement child in Children)
        {
            child.Measure(new Size(availableSize.Width/count,availableSize.Height));
            if (child.DesiredSize.Height > itemHeight)
            {
                itemHeight = child.DesiredSize.Height;
            };
        }

        // return the size available to the whole panel
        return new Size(availableSize.Width, itemHeight);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        // Get the collection of children
        UIElementCollection mychildren = Children;

        // Get total number of children
        int count = mychildren.Count;

        // Arrange children
        int i;
        for (i = 0; i < count; i++)
        {
            //get the item Origin Point
            Point cellOrigin = new Point(finalSize.Width / count * i,0);

            // Arrange child
            // Get desired height and width. This will not be larger than 100x100 as set in MeasureOverride.
            double dw = mychildren[i].DesiredSize.Width;
            double dh = mychildren[i].DesiredSize.Height;

            mychildren[i].Arrange(new Rect(cellOrigin.X, cellOrigin.Y, dw, dh));

        }

        // Return final size of the panel
        return new Size(finalSize.Width, itemHeight);
    }
}

在您的Xaml中使用它并将TextBlock.TextTrimming设置为CharacterEllipsis：

<Page
    x:Class="AutoResizeItemsSample.MainPage"
    ...
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="TextTemplate">
            <TextBlock Text="{Binding Text}"  TextTrimming="CharacterEllipsis">
            </TextBlock>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Name="rootPanel">
            <GridView Name="gridView" ItemTemplate="{StaticResource TextTemplate}" >
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <local:OneRowPanel ></local:OneRowPanel>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
        </StackPanel>
    </Grid>
</Page>

结果如下：

以下是完整演示：AutoResizeItemsSample。

Answer 3

使用ListView轻松解决此问题。 ItemsPanel已经是StackPanel，单个项目将根据需要调整大小。如果您需要每个项目的水平宽度不同，那么开箱即可支持。我认为解决方案是简单地选择ListView控件。

内部有自动调整大小项目的控件吗？

3 个答案: