2010-01-27 72 views
13

我有一個Grid,周圍有Border。在Grid上的鼠標懸停時,我想更改Border上的樣式。我會如何去做這件事?這是我嘗試過,沒有任何成功至今:更改鼠標周圍邊框的樣式

<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> 

在試圖建立這個XAML,我得到的錯誤

targetName屬性不能在風格二傳手設定。

但我想不出任何其他方式來做到這一點。幫助將不勝感激。使用任何代碼隱藏是不可能的。

回答

14

你需要做到以下幾點:

  1. 從邊界定義中刪除了BorderBrush。觸發器可以覆蓋樣式設置器設置的屬性,但不能直接在標籤內設置屬性。

  2. 將觸發器放入邊界而不是放入網格中(請參閱其他人提供的示例)。

  3. 關於網格上的命中測試:將一個透明框格的後面,使得鼠標懸停總是捕獲:

碼例如用於點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> 
0

該死的,那很棘手。

  1. 拖放透明邊框畫筆。它似乎與彩色筆刷相結合,阻止您看到邊框。
  2. 您可以直接在邊框上自己設置觸發器。
  3. 如果您只想在網格上使用觸發器,則可以使用PyBinding附加到正確的控件。 (我不知道如何做到這一點不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> 
    
10

直接設置觸發器邊框對象。此外,不要設置BorderBrush邊框對象上,也與觸發設置:

<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> 

此外,如果您無法看到的觸發器提出來,看看如何調試觸發器here。可以很有幫助。
希望這會有所幫助。

1

這是怎麼回事?

<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>