如何将ListView ItemTemplate中的内容右对齐?

时间:2018-08-31 15:15:19

标签: .net wpf xaml

这是不符合我想要的标记:

<DockPanel LastChildFill="True" Width="Auto">
    <ToolBar DockPanel.Dock="Top">
        <!-- Menu bar -->
    </ToolBar>

    <ListView ItemsSource="{Binding BrandsCollectionProp}" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="0" DockPanel.Dock="Bottom" HorizontalAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>

                    <DockPanel LastChildFill="True">
                        <Image Height="150" DockPanel.Dock="Left" Source="{Binding Img}" Margin="0,0,5,0"/>
                        <!-- Push this to right side of the windows -->
                        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" HorizontalAlignment="Stretch">
                            <TextBlock FontSize="24">adqwewqeqwdddd</TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Vertical" Margin="0,0,5,0">
                            <TextBlock MaxWidth="700" TextWrapping="Wrap"><Run Text="{Binding Title}"/></TextBlock>
                            <TextBlock TextWrapping="Wrap" TextAlignment="Right" Text="{Binding Time}"></TextBlock>
                            <TextBlock TextWrapping="Wrap" TextAlignment="Right" MaxWidth="700" Text="{Binding Text}"></TextBlock>
                        </StackPanel>
                    </DockPanel>

            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</DockPanel>

Image to show what I am currently have & what I am trying to achieve

With Grid without ListView component I can do almost as I want to do.

带有不带ListView的网格的代码:

<DockPanel>
<Grid DockPanel.Dock="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <DockPanel Margin="0,2" LastChildFill="True">
            <Image Height="150" DockPanel.Dock="Left" Source="http://playua.net/pu-content/uploads/2018/08/aa56b1443c1d5362dbf195ba82228c8f-250x215.jpg" Margin="0,0,5,0"/>
            <StackPanel Orientation="Vertical" Margin="0,0,5,0">
                <TextBlock MaxWidth="700" TextWrapping="Wrap" TextAlignment="Left" FontSize="20" FontWeight="UltraBlack" Margin="0,0,0,5"><Run Text="PEGI планує додати на носії напис «У грі присутні мікроплатежі»"/></TextBlock>
                <TextBlock TextWrapping="Wrap" TextAlignment="Right" FontSize="18" FontWeight="ExtraLight" FontFamily="Fantasque Sans Mono" FontStretch="ExtraCondensed" Margin="0,0,0,5" MaxWidth="700" Text="adasdqwewqewqewqewqeqw wqeqw ewq "></TextBlock>
            </StackPanel>
        </DockPanel>

        <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Stretch">
            <TextBlock MinWidth="200" FontSize="40" FontFamily="Georgia" FontStretch="UltraExpanded" TextAlignment="Center">Серпень</TextBlock>
            <TextBlock TextAlignment="Center" FontSize="20">12</TextBlock>
            <TextBlock TextAlignment="Center">2018</TextBlock>
        </StackPanel>
    </Grid>
</DockPanel>

1 个答案:

答案 0 :(得分:0)

您必须设置ItemContainerStyle属性才能更改ContentControl的对齐方式。

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