只在我的列表视图中的最后一个项目

Question

我想创建这样一个控制绘制边框：

控制是指4个对象的状态完成（在上面附着PIC 2完成， 2不是）

为了实现这一点，我创建了一个水平方向的ListView，并且我创建了一个有一些边界的数据模板。不知道这是否是正确的方法，或者是否可以使用更简单的方法我面临的问题如下：

1. 我无法关闭最后一个项目的边框。这是因为我在listview的项目源中有4个项目，每个项目都向左边绘制边框。问题是我如何专门为最后一个项目绘制正确的边框。

2. 穿过中间的线条应该实际上落后于灰色阴影..我怎么实现这一点？

守则如下：

 <Style x:Key="FishBoneStyle" TargetType="{x:Type Border}"> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding Path=Completed}" Value="True"> 
        <Setter Property="Background" Value="DarkGray"/> 
        <Setter Property="Margin" Value="0,3,-2,3"/> 
       </DataTrigger>    
      </Style.Triggers> 
     </Style> 

     <DataTemplate x:Key="FishBoneTemplate"> 
      <Grid Height="25"> 
      <Border BorderThickness="1,0,0,0" BorderBrush="Black" Height="25" HorizontalAlignment="Left" VerticalAlignment="Stretch"/> 
       <Border Style="{StaticResource FishBoneStyle}" x:Name="FishBoneBorder" Width="25"> 
      </Border> 
      </Grid>   
     </DataTemplate> 

<!-- The Main Grid--> 
<Grid Grid.Row="1" Height="30" Width="130" HorizontalAlignment="Left"> 
<ListView BorderThickness="0,0,0,0" BorderBrush="Black" ItemsSource="{Binding ProgressTiles}" ItemTemplate="{StaticResource FishBoneTemplate}"> 
<ListView.ItemsPanel> 
<ItemsPanelTemplate> 
    <StackPanel Orientation="Horizontal"></StackPanel> 
</ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
</ListView> 

<!-- The line which passess through the center--> 
    <Border VerticalAlignment="Center" HorizontalAlignment="Left" Width="100" Margin="3,0,2,0" BorderBrush="Black" BorderThickness="1"></Border> 
</Grid> 

..和这里是躺在我viewmodel.There可观察集合内将始终其中的4个型号。

public class ProgressTile : INotifyPropertyChanged 
    { 
     private bool _completed; 
     public bool Completed 
     { 
      get { return _completed; } 
      set 
      { 
       _completed = value; 
       InvokePropertyChanged("Completed"); 
      } 
     } 


     public event PropertyChangedEventHandler PropertyChanged; 
     public void InvokePropertyChanged(string e) 
     { 
      PropertyChangedEventHandler handler = PropertyChanged; 
      if (handler != null) handler(this, new PropertyChangedEventArgs(e)); 
     } 
    } 

请你可以建议如何让图片看起来一致。你也可以请建议如何解决这个问题，为最后一个项目画一个边框，并发送通过中间到背景的线条？

Answer 1

可以做简单得多：

<Window x:Class="So17362172FishBoneProgressBar.MainWindow" x:Name="root" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="Fish Bone Progress Bar" Height="350" Width="525" SnapsToDevicePixels="True"> 
    <Grid Width="100" Height="20"> 
     <TickBar Fill="Gray" TickFrequency="25" Placement="Top"/> 
     <TickBar Fill="Gray" TickFrequency="25" Placement="Bottom"/> 
     <Line Stroke="Gray" X1="0" Y1="10" X2="100" Y2="10"/> 
     <ItemsControl ItemsSource="{Binding Tiles, ElementName=root}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal"/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Rectangle x:Name="rect" Fill="Gray" VerticalAlignment="Center" Width="25" Height="10"/> 
        <DataTemplate.Triggers> 
         <DataTrigger Binding="{Binding Completed}" Value="False"> 
          <Setter TargetName="rect" Property="Visibility" Value="Collapsed"/> 
         </DataTrigger> 
        </DataTemplate.Triggers> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Grid> 
</Window> 

1. ListView是不必要的。更简单的ItemsControl就足够了。
2. 刻度可以用TickBar绘制。由于内部刻度线较小，所以两个刻度线相互交叉（这不应该成为问题，因为它们非常轻便）。
3. 绘图的顺序由逻辑树中的顺序决定。如果你想把某些东西拉到另一个上面，你可以把它放到XAML中。
4. 如果仅包含一个控件，则不需要Grid。