Question

目前，我有一个包含3列的网格行：text（带填充缩进），虚线和图标。我希望结果如下：

result

问题是我无法修复文本和图标之间的绘制线宽，它不是虚线，如下所示： error

这是我的数据模板：

  <DataTemplate x:Key="TreeItemTemplate">
        <Grid Width="456">
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="6*"/>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <!-- Text -->
            <TextBlock Margin="0,0,1,0" Visibility="{Binding NormalTextVisible}" TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay}" d:LayoutOverrides="Width, Height" Foreground="{Binding Colour}" Padding="{Binding ActualIndent, Mode=TwoWay}" FontSize="{StaticResource PhoneFontSizeMedium}"/>

            <!-- Line-->
            <Path  Grid.Column="1" Stroke="Red" StrokeThickness="2" StrokeDashArray="1 2 3" Stretch="Fill">
                <Path.Data>
                    <LineGeometry StartPoint="0,1" EndPoint="1,1" />
                </Path.Data>
            </Path>

            <!-- Icon-->
            <Grid Grid.Column="2" HorizontalAlignment="Right" >
                <Button Style="{StaticResource IconButton}"  Height="42" Width="42" HorizontalAlignment="Right">
                    <ImageBrush ImageSource="{Binding Image}" Stretch="None"/>
                </Button>
            </Grid>
        </Grid>
    </DataTemplate>

我的列表框：

   <ListBox x:Name="lstTreeView" HorizontalAlignment="Stretch" VerticalAlignment="Top" ItemsSource="{Binding TreeViewModel.TreeData, Mode=TwoWay}" ItemTemplate="{StaticResource TreeItemTemplate}"/>

有没有办法实现这个目标？

更新： @IvanCrojachKaračić：谢谢你的帮助。我试过你的方式，它有效。但问题是当我将第一列宽度设置为auto时，长文本无法换行新行并且图标消失（没有设置auto，文本可以正常换行）。你可以从这张图片中看到“Lennin House，......”这一行：

你能解决吗？提前谢谢。

更新2 ：这是我尝试使用换行文字问题

<DataTemplate x:Key="TreeItemTemplate">
<Grid Width="456">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="42"/>
    </Grid.ColumnDefinitions>
    <!-- Text -->
    <Grid Grid.Column="0">
        <TextBlock HorizontalAlignment="Stretch" Margin="0,0,1,0" VerticalAlignment="Center" Visibility="{Binding NormalTextVisible}" TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay}" d:LayoutOverrides="Width, Height" Foreground="{Binding Colour}" Padding="{Binding ActualIndent, Mode=TwoWay}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
    </Grid>
    <!-- Line-->
    <Line X1="0" Y1="21" X2="500" Y2="21" Stroke="Red" StrokeDashArray="4,1" StrokeThickness="2" Margin="3" Grid.Column="1" VerticalAlignment="Center" Height="42"/>

    <!-- Icon-->
    <Grid Grid.Column="2" HorizontalAlignment="Right" >
        <Button Style="{StaticResource IconButton}"  Height="42" Width="42" HorizontalAlignment="Right">
            <ImageBrush ImageSource="{Binding Image}" Stretch="None"/>
        </Button>
    </Grid>
</Grid>

Answer 1

据我所知，你的专栏definitino是问题的原因。您为该行的文本6/10分配3/10，为该图标分配1/10。

尝试这样

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="42"/>
</Grid.ColumnDefinitions>

并且您不需要rowdefinition

完整的更改列表可能是这样的

<DataTemplate x:Key="TreeItemTemplate">
    <Grid Width="456">
        <Grid.ColumnDefinitions>
            <!--<ColumnDefinition Width="Auto"/>-->
            <ColumnDefinition Width="Auto" MaxWidth="200"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="42"/>
        </Grid.ColumnDefinitions>
        <!-- Text -->
        <TextBlock Margin="0,0,1,0" VerticalAlignment="Center" Visibility="{Binding NormalTextVisible}" TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay}" d:LayoutOverrides="Width, Height" Foreground="{Binding Colour}" Padding="{Binding ActualIndent, Mode=TwoWay}" FontSize="{StaticResource PhoneFontSizeMedium}"/>

        <!-- Line-->
        <Line X1="0" Y1="21" X2="500" Y2="21" Stroke="Red" StrokeDashArray="4,1" StrokeThickness="2" Margin="3" Grid.Column="1" VerticalAlignment="Center" Height="42"/>

        <!-- Icon-->
        <Grid Grid.Column="2" HorizontalAlignment="Right" >
            <Button Style="{StaticResource IconButton}"  Height="42" Width="42" HorizontalAlignment="Right">
                <ImageBrush ImageSource="{Binding Image}" Stretch="None"/>
            </Button>
        </Grid>
    </Grid>
</DataTemplate>

编辑：如果要包装文本，则必须创建另一个网格，其中文本块在一行中，而列表框在另一行中。将texblock水平对齐设置为strech，一切都应该很好地包装

编辑：啊......现在我明白了...抱歉。只需在第一列定义中添加MaxWidth（参见上文）

即可

Answer 2

你可以使用“StrokeDashArray”属性使用虚线。如下！这里2是填充区域，1是间隙。

<Line X1="0" Y1="0" X2="100" Y2="0" Stroke="Red" StrokeThickness="5" StrokeDashArray="2,1"></Line>

你甚至可以给StrokeDashArray =“1 0.3 4 0.8”。这给出了均匀的间距，比例为1,0.3,4,0.8，再次为1,0.3,4.0.8等等。

如何在网格行窗口手机中绘制虚线

2 个答案: