DataTemplate ListBoxItem for MouseOver

Question

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.

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

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.

enter image description here

<DataTemplate x:Key="HoleBTemplate">
    <Grid Width="40" Height="40">
        <Ellipse>
            <Ellipse.Style>
                <Style TargetType="Ellipse">
                    <Setter Property="Fill" Value="DeepSkyBlue"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" Value="Yellow" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>
        <Ellipse Fill="White" Margin="1" IsHitTestVisible="False" />
        <TextBlock 
            VerticalAlignment="Center"
            TextAlignment="Center"
            HorizontalAlignment="Center"
            Text="{Binding Name}"
            IsHitTestVisible="False">
        </TextBlock>
        <Grid.RenderTransform>
            <TranslateTransform X="-20" Y="-20" />
        </Grid.RenderTransform>
    </Grid>
</DataTemplate>

I created my own ListBox Control which positions the ListBoxItems at an X,Y location inside a canvas.

<controls:ListBoxMap ItemsSource="{Binding Holes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas></Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplateSelector>
        <controls:PlanTemplateSelector 
            HoleATemplate="{StaticResource HoleATemplate}"
            HoleBTemplate="{StaticResource HoleBTemplate}"/>
    </ItemsControl.ItemTemplateSelector>
</controls:ListBoxMap>

TLDR: How do I get rid of the blue highlight area behind the circles on mouse over?

Possible duplicate of [How to disable highlighting on listbox but keep selection?](http://stackoverflow.com/questions/4343793/how-to-disable-highlighting-on-listbox-but-keep-selection) — lokusking, Feb 27 '17 at 07:51

score 0 · Answer 1 · edited Feb 28 '17 at 17:21

Answer from linked thread above, by Wayne Lo.

<Style TargetType="ListBoxItem">
    <Setter Property="IsSelected" Value="{Binding Content.IsSelected, Mode=TwoWay, RelativeSource={RelativeSource Self}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <ContentPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

DataTemplate ListBoxItem for MouseOver

1 Answers1