0

目前，我有一个包含 3 列的网格行：文本（带有填充缩进）、虚线和图标。我期望这样的结果：

结果

问题是我无法修复文本和图标之间的画线宽度，它不是虚线，如下所示： 错误

这是我的数据模板：

  <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}"/>

有没有办法做到这一点？

更新：@Ivan Crojach Karačić：感谢您的帮助。我试了你的方法，成功了。但问题是当我将第一列宽度设置为时auto，长文本无法换行并且图标消失（不设置auto，文本可以正常换行）。您可以从这张图片中看到“Lennin House,...”这一行：

e

你能修好它吗？提前致谢。

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

4

2 回答 2

5

据我所知，您的列定义是问题的原因。您为线条和图标分配6/10文本。3/101/10

像这样试试

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

而且你不需要行定义

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

<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在第一列定义中添加一个（见上文）

于 2013-06-11T06:47:34.597 回答
0

您可以使用“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 等比例的不均匀间距。

于 2013-06-13T11:46:18.700 回答