WPF：ListView中橫向StackPanel內的TextBlock.TextTrimming失靈

很多使用，我們需要在ListView中的列中橫向擺放一些東西，因此用到橫向的StackPanel，但是問題是在橫向的StackPanel下TextBlock的TextTrimming會失靈。原因則是橫向的StackPanel橫向不會限制空間寬度，那麼此時TextTrimming包括TextWrapping都不會起作用的，TextBlock永遠都會要多長就有多長。除非手動顯示TextBlock的寬度，顯然這不是一個好辦法。

 

比如這個代碼：

<Window.Resources>

    <!-- 資料 -->

    <x:ArrayExtension x:Key="arr"

                     xmlns="clr-namespace:System;assembly=mscorlib"

                     Type="String">

        <String>hehe long long long long long long long</String>

        <String>12345678900-78976587865</String>

    </x:ArrayExtension>

</Window.Resources>

<ListView ItemsSource="{StaticResource arr}">

    <ListView.View>

        <GridView>

            <GridViewColumn Header="aaa"

                           Width="50">

                <GridViewColumn.CellTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <Ellipse Width="10" Height="10" Fill="Navy"

                                    Margin="5"/>

                            <TextBlock Text="{Binding}"

                                      TextTrimming="CharacterEllipsis"/>

                        </StackPanel>

                    </DataTemplate>

                </GridViewColumn.CellTemplate>

            </GridViewColumn>

        </GridView>

    </ListView.View>

</ListView>

結果不會出現省略符號：

 

當然縱向的StackPanel不會出現這樣的問題（縱向的StackPanel限制寬度，不限制高度）。解決方案就是不用StackPanel，別忘了WPF中規劃控制項中的巨無霸“Grid”。

把上面的GridViewColumn的CellTemplate改成Grid實現：

<GridViewColumn.CellTemplate>

    <DataTemplate>

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition/>

            </Grid.ColumnDefinitions>

            <Ellipse Width="10"

                    Height="10"

                    Fill="Navy"

                    Margin="5"/>

            <TextBlock Text="{Binding}"

                      Grid.Column="1"

                      TextTrimming="CharacterEllipsis"/>

        </Grid>

    </DataTemplate>

</GridViewColumn.CellTemplate>

 

結果：