如何在网格行Windows Phone中绘制虚线

Question

Currently, I have a grid row with 3 columns: text (with padding indent), dash line and icon. I expect the result like this:

The problem is I can't fix draw line width between text and icon and it isn't dash line, as below:

Here is my data template:

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

And my listbox:

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

Is there any way to achieve that?

Update : @Ivan Crojach Karačić: Thanks for your help. I tried your way, it worked. But the problem is when I set the first column width as auto , the long text can't wrap in a new line and icon is disappeared (without setting auto , text can wrap normally). You can see the row "Lennin House,..." from this image:

Can you fix it? Thanks in advance.

Update 2 : Here is my try with wrap text issue

<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

As far as I can see your column definitino is the cause for the problem. You allocate 6/10 for the text 3/10 for the line and 1/10 for the icon.

Try it like this

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

And you don't need the rowdefinition

The full list of changes could be something like this

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

Edit: If you want the text to wrap you have to make create another grid with the textblock in one row and the listbox in another. Set the texblock horizontal alignment to strech and everything should wrap nicely

Edit: Ah... now I get it...sorry about that. Just add a MaxWidth to the first column definition (see above)

Answer 2

you can have dashed lines using "StrokeDashArray" propert. as bellow. here 2 is filled area and 1 is the gap.

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

You can even give StrokeDashArray="1 0.3 4 0.8" . This gives un even spacing in the proportions of 1,0.3,4,0.8 again 1,0.3,4.0.8 and so on.