UWP Xaml 相关面板、拉伸和其他元素

Question

我创建 UWP 应用程序并使用 RelativePanel。我使用相对 panel.alignwithright、顶部、左侧、底部面板将宽度拉伸到列表视图。但是在列表视图的右侧添加其他元素（例如 Stackpanel）后，其他面板不会在页面中查看。所以我删除了 relativePanel.AlignWithRight，在这种情况下无法在列表视图中进行宽度拉伸。

我能做什么？

代码：

<RelativePanel x:Name="Information" Grid.Row="1">
            <ListView x:Name="MyList"
                      RelativePanel.AlignBottomWithPanel="True"
                      RelativePanel.AlignTopWithPanel="True"
                      RelativePanel.AlignRightWithPanel="True"
                      RelativePanel.AlignLeftWithPanel="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <userControl:SpendListItem_Template Tapped="SpendListItem_Template_Tapped" ></userControl:SpendListItem_Template>
                    </DataTemplate>
                </ListView.ItemTemplate>

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        <Setter Property="Margin" Value="10,0,10,10"></Setter>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>

            <StackPanel x:Name="TotalInformation" RelativePanel.RightOf="MyList" Width="100">
                <TextBlock>Test Data</TextBlock>
            </StackPanel>
        </RelativePanel>

Answer 1

我很确定您不能通过仅设置一些 RelativePanel 附加属性来纯 XAML 执行此操作，但您可以处理 RelativePanel 的 SizeChanged 事件并以编程方式设置 ListView 的宽度。这是一个班轮：

private void Information_SizeChanged(object sender, SizeChangedEventArgs e)
{
     MyList.Width = Information.ActualWidth - TotalInformation.ActualWidth;
}

<RelativePanel x:Name="Information" Grid.Row="1" SizeChanged="Information_SizeChanged">
        <ListView x:Name="MyList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <userControl:SpendListItem_Template Tapped="SpendListItem_Template_Tapped" ></userControl:SpendListItem_Template>
                </DataTemplate>
            </ListView.ItemTemplate>

            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    <Setter Property="Margin" Value="10,0,10,10"></Setter>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>

        <StackPanel x:Name="TotalInformation" RelativePanel.RightOf="MyList" Width="100">
            <TextBlock>Test Data</TextBlock>
        </StackPanel>
 </RelativePanel>

UWP Xaml 相关面板、拉伸和其他元素

UWP Xaml Relative Panel, Stretch and Other Element

xaml

uwp

uwp-xaml