title: DataTemplate ListBoxItem for MouseOver
body: <p>I am trying to get a better understanding of the Templating system with WPF. My design goal here is that I am trying to re-design a component of a software package I work on to use WPF instead of 2D Graphics Librarys. The problem right now is that with 2000 entitys on the screen, pan and zoom is very laggy on a beefy i7 workstation. I wish to redevelop it in WPF to improve performance.</p>
  
  <p>Just as a test, I have created a new project and created a basic XAML/WPF View with a Canvas. This canvas displays ellipses (essentially I am building a 2D Map for planning purposes which has circles of different colors to show different things).</p>
  
  <p>Now, I have my circles showing up fine using a DataTemplate depending on what sort of model the circle is (Circle A or Circle B). When I mouse over the circle, I have the windows default 'blue box' area behind it, which I wish to remove. So far I have managed to use a trigger to change the circle color on mouse over, but I still have the hover area.</p>
  
  <p><img src="https://i.stack.imgur.com/q1YH8.png" alt="enter image description here"></p>
  
  <pre><code>&lt;DataTemplate x:Key="HoleBTemplate"&gt;
      &lt;Grid Width="40" Height="40"&gt;
          &lt;Ellipse&gt;
              &lt;Ellipse.Style&gt;
                  &lt;Style TargetType="Ellipse"&gt;
                      &lt;Setter Property="Fill" Value="DeepSkyBlue"/&gt;
                      &lt;Style.Triggers&gt;
                          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                              &lt;Setter Property="Fill" Value="Yellow" /&gt;
                          &lt;/Trigger&gt;
                      &lt;/Style.Triggers&gt;
                  &lt;/Style&gt;
              &lt;/Ellipse.Style&gt;
          &lt;/Ellipse&gt;
          &lt;Ellipse Fill="White" Margin="1" IsHitTestVisible="False" /&gt;
          &lt;TextBlock 
              VerticalAlignment="Center"
              TextAlignment="Center"
              HorizontalAlignment="Center"
              Text="{Binding Name}"
              IsHitTestVisible="False"&gt;
          &lt;/TextBlock&gt;
          &lt;Grid.RenderTransform&gt;
              &lt;TranslateTransform X="-20" Y="-20" /&gt;
          &lt;/Grid.RenderTransform&gt;
      &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>I created my own ListBox Control which positions the ListBoxItems at an X,Y location inside a canvas. </p>
  
  <pre><code>&lt;controls:ListBoxMap ItemsSource="{Binding Holes}"&gt;
      &lt;ItemsControl.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;Canvas&gt;&lt;/Canvas&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/ItemsControl.ItemsPanel&gt;
      &lt;ItemsControl.ItemTemplateSelector&gt;
          &lt;controls:PlanTemplateSelector 
              HoleATemplate="{StaticResource HoleATemplate}"
              HoleBTemplate="{StaticResource HoleBTemplate}"/&gt;
      &lt;/ItemsControl.ItemTemplateSelector&gt;
  &lt;/controls:ListBoxMap&gt;
  </code></pre>
  
  <p>TLDR: How do I get rid of the blue highlight area behind the circles on mouse over?</p>