2009-10-27 37 views
6

Làm cách nào để tạo đường viền mặc định trên ListBoxItems của tôi một đường viền chấm chấm? Xem cách tạo kiểu sau:Đường viền chấm chấm trên ListBoxItem trong WPF

<Grid.Resources> 
    <Style TargetType="{x:Type ListBoxItem}"> 
     <Setter Property="Height" Value="30" /> 
     <Setter Property="BorderThickness" Value="0,0,0,1" /> 
     <Setter Property="BorderBrush" Value="Silver" /> 
     <Setter Property="Content" Value="" /> 
     <Style.Triggers> 
      <Trigger Property="ItemsControl.AlternationIndex" Value="3"> 
       <Setter Property="BorderBrush" Value="Black"></Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</Grid.Resources> 

Ở đây tôi làm cho AlternationIndex 0, 1 và 2 thành đường viền chấm thay vì một đường liền nét. Điều này có thể giải quyết như thế nào?

+0

Ngoài ra, hãy xem câu trả lời của tôi ở đây: https://stackoverflow.com/a/17431518/1230982 Chúng tôi đã có thể sử dụng kỹ thuật này để sử dụng Biên giới thực tế và tránh sử dụng hình chữ nhật. –

Trả lời

5

Hãy thử điều này:

<Window.Resources> 
     <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" /> 
     <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" /> 
     <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" /> 
     <!-- SimpleStyles: ListBoxItem --> 
     <Style TargetType="ListBoxItem" x:Key="ListBoxItemTemplate"> 
      <Setter Property="SnapsToDevicePixels" Value="true"/> 
      <Setter Property="OverridesDefaultStyle" Value="true"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBoxItem"> 
         <Grid> 
          <Rectangle x:Name="Rectangle" Fill="Transparent" Stroke="Black" 
             StrokeDashCap="Square" StrokeThickness="0" SnapsToDevicePixels="True"> 
           <Rectangle.StrokeDashArray> 
            <sys:Double>5</sys:Double> 
           </Rectangle.StrokeDashArray> 
          </Rectangle> 
          <Border 
           Name="Border" 
           Padding="2" 
           BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}" 
           BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}"> 
           <ContentPresenter /> 
          </Border> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="true"> 
           <Setter TargetName="Rectangle" Property="StrokeThickness" Value="1" /> 
           <Setter TargetName="Border" Property="BorderThickness" Value="0" /> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="true"> 
           <Setter TargetName="Rectangle" Property="Fill" Value="{StaticResource SelectedBackgroundBrush}" /> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="false"> 
           <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

     <Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource ListBoxItemTemplate}"> 
      <Setter Property="Height" Value="30" /> 
      <Setter Property="BorderThickness" Value="0,0,0,1" /> 
      <Setter Property="BorderBrush" Value="Silver" /> 
      <Style.Triggers> 
       <Trigger Property="ItemsControl.AlternationIndex" Value="3"> 
        <Setter Property="BorderBrush" Value="Black"></Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 

    </Window.Resources> 
    <StackPanel> 
     <ListBox> 
      <ListBoxItem Content="Item 1" /> 
      <ListBoxItem Content="Item 2" /> 
      <ListBoxItem Content="Item 3" /> 
      <ListBoxItem Content="Item 4" /> 
     </ListBox> 
    </StackPanel> 

Vì vậy, tôi đặt một hình chữ nhật dưới biên giới thực tế trong các mẫu kiểm soát. Các hình chữ nhật có thể có đường viền của nó được rải rác, hoặc dashed hoặc w/e (để làm cho dấu gạch ngang nhỏ hơn chỉ cần thay đổi một phần đến 2, 1 là không đáng chú ý). Vì vậy, giá trị mặc định của độ dày biên giới của hình chữ nhật là 0, nhưng khi được chọn, tôi đặt độ dày thành 1 để có thể nhìn thấy. Tôi đã làm cho một số thuộc tính biên giới được ràng buộc với bố mẹ templated của nó quá, vì vậy nó có thể trông giống như những gì bạn đặt trên phong cách của bạn (bàn chải bạc, độ dày 0,0,0,1).

Các vấn đề liên quan