WPF UserControl border blinking when moving mouse outside during command processing - wpf

Question

I have written a WPF UserControl (let's called it ContainerUserControl), inside it it uses other UserControl (let's call it OstUserControl) which I build from another project. Within the ContainerUserControl, I have a RibbonGroup hosting bunch of RibbonButtons. The OtsUserControl can respond to user mouse clicks on a toggle button inside and runs the same code if user clicks a corresponding RibbonButton.
However the odd thing is: If I click the RibbonButton (which is outside of the border of the OtsUserControl), there is flickering around the boundary of OtsUserControl;
If I click a toggle button inside OtsUserControl and don't move the mouse outside the OtsUserControl, there is NO flickering;
If I click a toggle button inside OtsUserControl and move the mouse outside the OtsUserControl, there is flickering.
How can I fix this flickering problem?
BTW, the code to invoke it via RibbonButton goes through MVVM Light's RelayCommand mechanism.
I also have a file being shared on the SkyDrive. When you ran the sample application, after the MainWindow has been loaded, click on one of the tree node with folder icon and click the expander button as you do in windows explorer. You will see no flickering. However if you select the same node and click the Toggle Expand button on the toolbar, you will see the usercontrol border flickering.
To view it, click the link below.
sample VS 2012 project showing the flickering problem

Answer 1

This is the Default ListView Template (extracted using Blend):
<ControlTemplate TargetType="{x:Type ListView}">
<Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"
SnapsToDevicePixels="true">
<ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Microsoft_Windows_Themes:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The border blinks whenever the IsMouseOver or IsKeyboardFocusWithin are toggled.
If you don't want that, simply change these lines:
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"
To:
RenderMouseOver="False"
RenderFocused="False"
You will need to add a reference to PresentationFramework.Aero.dll and add this xmlns:
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"