代码之家  ›  专栏  ›  技术社区  ›  Todd Main

Grid.IsSharedSizeScope等效于Windows 8

  •  3
  • Todd Main  · 技术社区  · 11 年前

    有没有类似于WPF的简单(非自定义编码) Grid.IsSharedSizeScope 在Windows 8/RT XAML中?

    我有 ListViewItem s,分为3个水平部分,这3列需要与所有边界对齐(每列最宽) 列表视图项 .

    2 回复  |  直到 11 年前
        1
  •  1
  •   Pavel Anikhouski    4 年前

    由于那是针对wpf的,我找到了一个Metro解决方案。我将整个代码粘贴到这里。:)

    <Page.Resources>        
        <DataTemplate x:Key="DataTemplate1"  >
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <TextBlock Text="{Binding Name1}"/>
                </StackPanel>
                <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <TextBlock Text="{Binding Name2}"/>
                </StackPanel>
                <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <TextBlock Text="{Binding Name3}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">        
        <ListView Name="MyList" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"  VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" ItemTemplate="{StaticResource DataTemplate1}">  
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemsPanel>                
                <ItemsPanelTemplate
                    <!-- Here is the panel that will contain the items -->
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Background="Pink" VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
    </Grid>
    

    以及背后的代码。只是尝试一下,没有使用MVVM

    这是cs

            List<test> li = new List<test>();
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            for (int i = 0; i < 10; i++)
            {
                li.Add(new test()
                {
                    Name1 = "Anobik1" + i.ToString(),
                    Name2 = "Anobik1"                    +i.ToString(),
                    Name3 = "Anobik1"                    +i.ToString()
                });
            }
            MyList.ItemsSource = li;
        }
    

    我绑定的类如下

    class test
    {
        public string Name1 { get; set; }
        public string Name2 { get; set; }
        public string Name3 { get; set; }
    }
    

    希望这会有所帮助。

    好的,最后一个答案我没有编辑,因为这有点太长了,我想展示我正在研究的整个演示,这样它可以对你有益。

        2
  •  1
  •   chue x    11 年前

    以下是如何在listview中划分堆叠面板的示例代码

    <ListView Name="MyList" ItemsSource="{Binding Path=MeasuringDeviceCommunicators}"  >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <!-- Here is the panel that will contain the items -->
                    <StackPanel Orientation="Vertical" Width="{Binding ActualWidth, ElementName= MyList}" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate >
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" ></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></StackPanel>
                        <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></StackPanel>
                        <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    试试看,你的内容会进入三个堆叠面板。而决定列表视图中项目方向的堆叠面板已设置为满足父项宽度,网格已拉伸为满足父级宽度。