UWP DataTemplate的RelativeSource数据绑定

如题,在 UWP 的 ListView 里有一个 ItemTemplate 用来盛放影视剧的海报、标题、评分,但是如果影视剧的名称太长的话会把 RelativePanel 撑开,两边留出白边很不好看。
然而因为是在 Template 里,所以各个元素很难命名,所以直接 Binding 或者 x:Bind 基本不可能,已经尝试了 RelativeSource 但是貌似 UWP 和 WPF 里不太一样…

求助各位啦~

<DataTemplate x:DataType="data:ShowListItem">
    <RelativePanel Height="225"
                   Background="#EFEFEF">
        <!-- 剧集海报图片 -->
        <Image Height="225"
               RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.AlignVerticalCenterWithPanel="True"
               Source="{x:Bind Poster}" />
        <!-- 需要将这个 Stackpanel 的 Width 绑定到上面的图片的 Width 上 -->
        <StackPanel Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Width}"
                    Padding="0,6"
                    Background="#50FFFFFF"
                    RelativePanel.AlignBottomWithPanel="True">
            <!-- 剧集评分 -->
            <TextBlock Text="{x:Bind RatingInStars}"
                       TextAlignment="Center"
                       FontFamily="Segoe UI Emoji"
                       FontSize="12"/>
            <!-- 剧集名称 -->
            <TextBlock Text="{x:Bind ShowName}"
                       Name="EPName"
                       TextAlignment="Center"/>
        </StackPanel>
    </RelativePanel>
</DataTemplate>
阅读 3.7k
1 个回答

是这样的,你的图片高度是255固定值,
所以如果想要字符串能够完全显示,那么图片横纵比会失调;
或者图片不完全显示,但横纵比正常,但是字符串会被吞掉一部分

我试了一下图片不完全显示,但是横纵比正常的方式
,别人应该会有更好的办法

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView x:Name="listview">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Height="225"
                          Background="#EFEFEF">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4*"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Image Height="225"
                               Stretch="None"
                               RelativePanel.AlignHorizontalCenterWithPanel="True"
                               RelativePanel.AlignVerticalCenterWithPanel="True"
                               Source="Assets/注册.png"
                               Grid.Row="0" Grid.RowSpan="3">
                        </Image>

                        <StackPanel Grid.Row="1" Grid.RowSpan="2">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>

                                <TextBlock Text="啊打发发啊放假今儿个蒋介石就哦i问富翁微软微软"
                                           TextAlignment="Center"
                                           FontFamily="Segoe UI Emoji"
                                           FontSize="12"
                                           TextTrimming="CharacterEllipsis"
                                           Grid.Row="0"/>
                                <TextBlock Text="啊打发发啊放假今儿个蒋介石就哦i问富翁微软微软啊打发发啊放假今儿个蒋介石就哦i问富翁微软微软"
                                           Name="EPName"
                                           TextAlignment="Center"
                                           TextTrimming="CharacterEllipsis"
                                           Grid.Row="1"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

希望能有一些帮助

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进