UWP Xaml 相关面板、拉伸等元素答案

【问题标题】：UWP Xaml Relative Panel, Stretch and Other ElementUWP Xaml 相关面板、拉伸等元素
【发布时间】：2016-12-10 08:11:48
【问题描述】：

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

我能做什么？

代码：

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

【问题讨论】：

标签： xaml uwp uwp-xaml

【解决方案1】：

我很确定您不能在纯 XAML 中通过仅设置一些 RelativePanel 附加属性来执行此操作，但您可以处理 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>

【讨论】：