只在我的列表視圖中的最後一個項目

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。