none
[UWP & WPF] 无法理解这些布局逻辑 RRS feed

  • 问题

  • Xaml (UWP & WPF4~4.6.1)

    <Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.RowSpan="1" Grid.Column="0" VerticalAlignment="Center" Text="Row1"/>
        <Rectangle Grid.Row="0" Grid.RowSpan="1" Grid.Column="1" Fill="Purple" Width="12" Height="50" VerticalAlignment="Top"/>
        <Rectangle Grid.Row="0" Grid.RowSpan="1" Grid.Column="2" Fill="Pink" Width="12" Height="50" VerticalAlignment="Center"/>
        <Rectangle Grid.Row="0" Grid.RowSpan="1" Grid.Column="3" Fill="Brown" Width="12" Height="50" VerticalAlignment="Bottom"/>
        <Rectangle Grid.Row="0" Grid.RowSpan="2" Grid.Column="4" Fill="Red" Width="12" Height="50" VerticalAlignment="Center"/>
        <Rectangle Grid.Row="0" Grid.RowSpan="2" Grid.Column="5" Fill="Black" Width="12" Height="100"/>
    </Grid>


    为什么是这个样子?

    修改代码为:

    ......
    <RowDefinition Height="50"/>
    <RowDefinition Height="*"/>
    ......



    另一个UWP问题

    Xaml

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ListView x:Name="LV" ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Width="{Binding}" Fill="Red"/>
                        <TextBlock Grid.Column="1" Text="ListView"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ListBox Grid.Row="1" ItemsSource="{Binding ItemsSource, ElementName=LV}" ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle Width="{Binding}" Fill="Blue"/>
                        <TextBlock Grid.Column="1" Text="ListBox"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

    C++

    LV->ItemsSource = ref new Platform::Collections::Vector<double>{ 100.0, 150.0, 200.0 };

    C#

    LV.ItemsSource = new List<double> { 100.0, 150.0, 200.0 };

    这是怎么一回事?


    我的操作系统是Windows10。

    https://social.msdn.microsoft.com/Forums/en-US/f5b1738c-e5f4-4b32-8668-284e5fa0d8bd/uwp-wpf-cannot-understand-these-layout-logic?forum=wpdevelop

    2016年8月25日 9:02

全部回复

  • WPF和UWP 的XAML渲染引擎不一样吧
    2016年8月30日 1:00
  • 设置的属性混在一起了吧,一般不会设置了row的宽度又在控件上设置宽度吧
    2016年8月30日 1:52
  • WPF和UWP 的XAML渲染引擎不一样吧
    当然都是一样的,都是DirectX,而且布局逻辑也都是一样的。
    2016年8月30日 8:36
  • 设置的属性混在一起了吧,一般不会设置了row的宽度又在控件上设置宽度吧
    这么做是为了呈现问题,不过在实际使用中也经常需要同时设置两者来实现裁切效果,另外即使不同时设置同样存在此问题,比如将ListView中的Rectangle改换为宽度为Auto的ComboBox,同样会发生列宽度自动扩展问题。
    2016年8月30日 8:41