【问题标题】:Grid.IsSharedSizeScope equivalent for Windows 8Grid.IsSharedSizeScope 等效于 Windows 8
【发布时间】:2013-10-04 09:14:59
【问题描述】:

在 Windows 8/RT XAML 中是否有任何与 WPF Grid.IsSharedSizeScope 等效的简单(非自定义编码)?

我有ListViewItems,它被分成 3 个水平部分,这 3 列需要对齐(每列最宽)到所有绑定的ListViewItem

【问题讨论】:

  • 托德,你可以通过地铁解决方案 :) 为我工作。如果需要更多修改,请告诉我:)

标签: windows-8 windows-runtime winrt-xaml


【解决方案1】:

因为那是针对 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; }
}

希望这会有所帮助。

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

【讨论】:

  • 哇,太棒了!正是我需要的。非常感谢 Anobik!
  • 感谢 乐于助人 :)
【解决方案2】:

这是一个示例代码如何在列表视图中划分堆栈面板

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

试一试,您的内容将进入三个堆栈面板。虽然决定列表视图中项目方向的堆栈面板已设置为满足父级宽度,但网格已被拉伸以满足父级宽度。

【讨论】:

  • 这很有希望,但它似乎只适用于 WPF,不适用于 Silverlight 或 WinRT。在 SL 和 WRT 页面(如 msdn.microsoft.com/en-us/library/windows/apps/…)上,它说 For purposes of ElementName binding, ActualWidth does not post updates when it changes (due to its asynchronous and run-time calculated nature). Do not attempt to use ActualWidth as a binding source for an ElementName binding. If you have a scenario that requires updates based on ActualWidth, use a SizeChanged handler. +1 表示努力。
  • 我是否也尝试 Metro xaml ?
  • 地铁 xaml = winrt.我在那里试过,不幸的是它不起作用。
  • 好吧,我看看能不能找到休息的地方:)我会让你知道的。 :)
猜你喜欢
  • 2013-05-11
  • 2012-10-22
  • 1970-01-01
  • 1970-01-01
  • 2014-06-20
  • 1970-01-01
  • 2012-09-08
  • 1970-01-01
  • 2012-06-09
相关资源
最近更新 更多