2014-01-02 1 views
0

Я пытаюсь создать такого дизайнера, как Visual Studio.Граница элемента управления не отображается в соответствующее время

Предположим, у меня есть сетка. Внутри у меня есть TextBox и TextBlock. Для лучшего понимания посмотрите на пример кода ниже:

<Page.Resources> 
    <Style x:Key="myStyle" TargetType="{x:Type Border}"> 
     <Setter Property="BorderBrush" Value="Transparent" /> 
     <Setter Property="BorderThickness" Value="2" /> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="BorderBrush" Value="DodgerBlue" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</Page.Resources> 

<Border Style="myStyle"> 
    <Grid> 
     <Border Style="myStyle"> 
      <TextBox ...... /> 
     </Border> 
     <Border Style="myStyle"> 
      <TextBlock ...... /> 
     </Border> 
    </Grid> 
</Border> 

Теперь, когда я MouseOver на любом из элементов я хочу, чтобы получить рамку вокруг него.

Мои проблемы:

  1. я получаю границу вокруг сетки, а также границы вокруг TextBlock, когда курсор мыши находится над TextBlock.

  2. Когда мой указатель мыши проходит по пустой области сетки, граница не отображается.

Требования:

  1. , когда курсор мыши переходит TextBlock, граница вокруг сетки должна стать невидимым.

  2. Когда курсор мыши пробегает пустую область в сетке, граница вокруг сетки должна стать видимой.

Просьба предложить изменения, которые должны быть выполнены в вышеуказанном коде, иметь требуемые функциональные возможности.

+0

2. Не ясно – Paparazzi

+0

@Blam Я имею в виду, когда мой курсор идет только через прозрачную границу сетки, я могу видеть границу DodgerBlue цвета. Но когда мой курсор перемещается по пустой области сетки (кроме области границы), я не вижу границы. – Khushi

+0

Устраните вопрос. Четко определите требуемую функциональность. – Paparazzi

ответ

0

Почему вы назначили myStyle наружной границе? Просто оставьте это.

+0

Но я хочу стилизовать его так же, как и его дочерний элемент управления. – Khushi

0

1: Я думаю, ваша идея с светящейся родительской границей не очень хороша. Потому что он будет мигать всякий раз, когда пользователь держит мышь над сеткой. Возможно, это будет раздражать пользователя :)

2: Попробуйте установить Grid.Background = «Прозрачный».

+0

Я пробовал это, но он не работает. – Khushi

+0

Я думаю, что вы полностью не понимаете мой вопрос. Чтобы лучше понять мою проблему, откройте визуальную студию и создайте проект типа WPF Application. Поместите границу, а затем поместите в нее сетку. Теперь поместите границу внутри Grid и поместите TextBlock внутри этой границы. Не запускайте проект и просто наведите указатель мыши на сетку, пустую область сетки и текстовый блок. Я хочу иметь такое же поведение. – Khushi

0

Попробуйте

<Grid Background="LightGray" > 
     <Grid.Triggers> 
      <EventTrigger RoutedEvent="MouseEnter"> 
       <BeginStoryboard> 
        <Storyboard > 
         <DoubleAnimation From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Grid_Bd" Duration="0:0:0.1"></DoubleAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="MouseLeave"> 
       <BeginStoryboard> 
        <Storyboard > 
         <DoubleAnimation From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Grid_Bd" Duration="0:0:0.1"></DoubleAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Grid.Triggers> 

     <Grid Height="50" Width="50"> 
      <Border x:Name="TextBlock_Bd" Opacity="0" BorderBrush="Blue" BorderThickness="1"/> 
      <TextBlock Text="Hello !!" HorizontalAlignment="Center" VerticalAlignment="Center"> 
       <TextBlock.Triggers> 
        <EventTrigger RoutedEvent="MouseEnter"> 
         <BeginStoryboard> 
          <Storyboard > 
           <DoubleAnimation From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TextBlock_Bd" Duration="0:0:0.1"></DoubleAnimation> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="MouseLeave"> 
         <BeginStoryboard> 
          <Storyboard > 
           <DoubleAnimation From="1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TextBlock_Bd" Duration="0:0:0.1"></DoubleAnimation> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </TextBlock.Triggers> 
      </TextBlock> 
     </Grid> 
     <Border x:Name="Grid_Bd" Opacity="0" BorderBrush="Red" BorderThickness="1"/>       
    </Grid> 
Смежные вопросы