Thay đổi kiểu viền xung quanh trên chuột qua

Question

Tôi có một Grid với một số Border xung quanh nó. Khi di chuột qua trên Grid, tôi muốn thay đổi kiểu trên Border. Tôi sẽ đi đâu để tới đó? Đây là những gì tôi đã cố gắng, mà không cần bất kỳ sự thành công cho đến nay:

<Border Name="Border" BorderBrush="Transparent" BorderThickness="1" CornerRadius="2"> 
    <Grid> 
     <Grid.Style> 
      <Style TargetType="{x:Type Grid}"> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter TargetName="Border" Property="BorderBrush" Value="#FFB9D7FC" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Grid.Style> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 

     ... 
    </Grid> 
</Border> 

Khi cố gắng để xây dựng XAML này, tôi nhận được lỗi

tài sản TargetName không thể được đặt trên một Setter Style.

nhưng tôi không thể nghĩ ra cách nào khác để thực hiện việc này. Trợ giúp sẽ được nhiều đánh giá cao. Sử dụng bất kỳ mã-đằng sau là ra khỏi câu hỏi.

Answer 1

Bạn cần làm như sau:

1. Tháo BorderBrush từ định nghĩa biên giới. Trình kích hoạt có thể ghi đè các thuộc tính được đặt bởi các bộ định dạng theo kiểu, nhưng không được đặt trực tiếp trong thẻ.

2. Đặt trình kích hoạt vào đường viền chứ không phải vào lưới (xem ví dụ mà những người khác đã cung cấp).

3. Về kiểm tra hit trên lưới: Đặt một hộp trong suốt phía sau lưới điện nên MouseOver luôn chiếm được:

Mã ví dụ cho điểm 3:

<Grid> 
    <Rectangle Fill="Transparent" /><!-- make sure that the mouse is always over "something" --> 
    <Grid Name="myGrid">  
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <TextBlock Name="myText">sadasdsa</TextBlock> 
    </Grid> 
</Grid> 

Answer 2

Chết tiệt, điều đó thật khó khăn.

1. Thả bàn chải viền trong suốt. Dường như kết hợp với cọ màu, ngăn bạn nhìn thấy đường viền.
2. Bạn có thể kích hoạt trực tiếp trên chính đường viền.

3. Nếu bạn muốn kích hoạt chỉ trên lưới, bạn có thể sử dụng PyBinding để đính kèm vào điều khiển chính xác. (Tôi không biết làm thế nào để làm điều này mà không PyBinding.)

   <Border Name="myBorder" Margin="4" BorderThickness="4" CornerRadius="2"> 
       <Border.Style> 
          <Style TargetType="{x:Type Border}"> 
          <Style.Triggers> 
          <!-- option 1 --> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="BorderBrush" Value="#FFB9D7FC" /> 
          </Trigger> 
          <!-- option 2 --> 
           <DataTrigger Binding="{p:PyBinding $[myBorder.IsMouseOver]}" Value="True"> 
           <Setter Property="BorderBrush" Value="#FFB9D7FC" /> 
          </DataTrigger> 
         </Style.Triggers> 
         </Style> 
       </Border.Style> 
       <Grid Name="myGrid">  
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Name="myText">sadasdsa</TextBlock> 
       </Grid> 
   </Border> 
   

Answer 3

Đặt trigger trực tiếp trên đối tượng Border. Ngoài ra, không thiết lập các BorderBrush trên đối tượng Border, mà còn thiết lập nó với cò:

<Border.Style> 
     <Style TargetType="{x:Type Border}"> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Border.BorderBrush" Value="Yellow" /> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="False"> 
        <Setter Property="Border.BorderBrush" Value="Black" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Border.Style> 

Ngoài ra, nếu bạn đang gặp rắc rối khi nhìn thấy những gì mà tác nhân là lên đến, hãy kiểm tra như thế nào để gỡ lỗi trigger here. Có thể khá hữu ích.
Hy vọng điều này sẽ hữu ích.

Answer 4

Điều này thì sao?

<Border BorderThickness="1" CornerRadius="2"> 
     <Border.Style> 
      <Style TargetType="{x:Type Border}"> 
       <Setter Property="BorderBrush" Value="Transparent" /> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="BorderBrush" Value="#FFB9D7FC" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Style> 

     <Grid Background="Transparent"> 

      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 

      <TextBlock Name="myText">sadasdsa</TextBlock> 
     </Grid> 

    </Border>