2011-04-13 20 views
9

Próbuję umieścić pionowe linie między kolumnami w ListViewItem. Próbowałem podanych rozwiązań. Ale nie działa. Czy ktoś może mi pomóc w rozwiązaniu tego problemu. Stworzyłem osobny styl dla ListViewItem. Czy muszę dodać jakąś właściwość w stylach?Jak umieścić pionowe linie dla listviewitem w WPF

Kod jest tak

<ListView x:Key="ListView1" ItemContainerStyle="{DynamicResource ListViewItemStyle1}"> 
<ListView.View> 
    <GridView> 
     <GridViewColumn Header="{TemplateBinding GridView.ColumnCollection}"> 
      <GridViewColumn.CellTemplate> 
       <DataTemplate> 
        <Border BorderBrush="#FF000000" BorderThickness="1,0,0,0" Margin="-6,-2,-6,-2"> 
         <StackPanel Margin="6,2,6,2"> 
          <TextBlock Text="{TemplateBinding Content}"/> 
         </StackPanel> 
        </Border> 
       </DataTemplate> 
      </GridViewColumn.CellTemplate> 
     </GridViewColumn> 
    </GridView> 
</ListView.View> 
</ListView> 

dosłownie to powinno działać, ale jej nie działa. Nie jestem w stanie dodać pionowe linie za pomocą powyższego kodu ..

+2

Czy widzisz "Treść" w swojej blokadzie tekstowej? – Markus

Odpowiedz

11

Oto krótka próbka z ListView i dwóch kolumnach. Sztuką jest zdefiniowanie DataTemplate z ramką, rozciągnięcie obramowania w celu wypełnienia komórki (zobacz ItemContainerStyle, Style ListViewItem, H/V-ContentAngment = Stretch) i wyświetlenie (w tym przypadku) prawej i dolnej linii (przez BorderThickness = "0,0,1,1"). Dla Państwa przypadku użycia BorderThickness = "0,0,1,0"

<ListView ItemsSource="{Binding}"> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
       <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <ListView.Resources> 
      <DataTemplate x:Key="NameTemplate"> 
       <Border BorderThickness="0,0,1,1" BorderBrush="LightGray" Margin="-6,0,-6,0"> 
        <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"></TextBlock> 
       </Border> 
      </DataTemplate> 
      <DataTemplate x:Key="ActualValueTemplate"> 
       <Border BorderThickness="0,0,1,1" BorderBrush="LightGray" Margin="-6,0,-6,0"> 
        <TextBlock Name="ActualValueTextBlock" Margin="2,1,1,1" Text="{Binding TextMeasuredValue}" VerticalAlignment="Center"></TextBlock> 
       </Border> 
      </DataTemplate> 
     </ListView.Resources> 
     <ListView.View> 
      <GridView> 
       <GridView.Columns> 
        <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}"></GridViewColumn> 
        <GridViewColumn Header="Actual Value" CellTemplate="{StaticResource ActualValueTemplate}"></GridViewColumn> 
       </GridView.Columns> 
      </GridView> 
     </ListView.View> 
    </ListView> 

Edit:
użyłem kodu źródłowego z niewielkimi modyfikacjami:

<ListView ItemContainerStyle="{DynamicResource ListViewItemStyle1}"> 
    <ListView.View> 
     <GridView> 
      <GridViewColumn Header="My Header"> 
       <GridViewColumn.CellTemplate> 
        <DataTemplate> 
         <Border BorderBrush="#FF000000" BorderThickness="1,0,1,0" Margin="-6,-2,-6,-2"> 
          <StackPanel Margin="6,2,6,2"> 
           <TextBlock Text="{TemplateBinding Content}"/> 
          </StackPanel> 
         </Border> 
        </DataTemplate> 
       </GridViewColumn.CellTemplate> 
      </GridViewColumn> 
     </GridView> 
    </ListView.View> 
    <ListViewItem>Hello</ListViewItem> 
    <ListViewItem>Stack</ListViewItem> 
    <ListViewItem>Overflow</ListViewItem> 
</ListView> 

a wynik jest podobny to:
ListView with vertical lines

Dodałem pionowe linie po prawej, dla lepszej widoczności, a obramowanie nie jest wyprostowane do skoczka ds komórki - ok, więc wygląda trochę brzydko. Ale jak widać, działa.

+0

dzięki za wartośćową odpowiedź. Próbowałem użyć powyższego przykładowego kodu, ale linie wertykalne się nie pojawiły. – Preeth

+2

Szczególnie mój przykład pokazuje pionowe i poziome linie. Jest usuwany z projektu. Próbowałem nawet (części) twojego kodu. Po lewej stronie widzę czarną pionową linię. – Markus

5

Spróbuj kolor tła swojego granicy, aby był on widoczny

Przykład:

<Border BorderBrush="#FF000000" Background="Red" BorderThickness="1,0,1,0" Margin="-6,-2,-6,-2"> 

Jeśli zobaczysz czerwony prostokąt za treści, niż grać z wartościami marginesu i BorderThickness dla dalszego debugowania.

Powiązane problemy