ContainerSplitter MouseEnter color

Posted 11 years ago by Haibing

Version: 13.1.0583

We want to do a little customize to the ContainerSplitter, so that it can have some different color when mouse is over it.

 <Style TargetType="{x:Type docking:ContainerSplitter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type docking:Splitter}">
                    <Grid>
                        <Grid x:Name="Grid" Background="#E0E0E0E0">
                            <Grid.Triggers>
                                <EventTrigger RoutedEvent="MouseEnter">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                            FillBehavior="HoldEnd"
                                                            From="#E0E0E0E0"
                                                            Storyboard.TargetName="Grid"
                                                            Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
                                                            To="#A0A0A0A0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="MouseLeave">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                            FillBehavior="HoldEnd"
                                                            From="#A0A0A0A0"
                                                            Storyboard.TargetName="Grid"
                                                            Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"
                                                            To="#E0E0E0E0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Grid.Triggers>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

However, the issue we have is there will be a Rectangle stay in the original place when we drag it.

How could we handle this? Many thanks, Haibing

Comments (9)

Answer - Posted 11 years ago by Actipro Software Support - Cleveland, OH, USA

The Brush used to indicate a dragged splitter (while the mouse button is down and moving) is the one defined by this x:Key:

{DynamicResource {x:Static dockingThemes:DockingResourceKeys.SplitterPreviewBrushKey}}

You can create a Brush in your app's Resource with that x:Key and it will update the splitter drag preview.

Actipro Software Support

Posted 11 years ago by Haibing

Thanks for the reply. I have added the following line to our application resource, but without any effect:

<SolidColorBrush x:Key="{x:Static dockingThemes:DockingResourceKeys.SplitterPreviewBrushKey}" Color="Red"></SolidColorBrush>

Could it's what i have done ok?

Posted 11 years ago by Actipro Software Support - Cleveland, OH, USA

Hello, we added the line you gave and your original XAML to our Application.Resources and saw both take effect ok. The splitter turned gray on hover (per your original XAML) and turned red when the mouse was down and it was being dragged.

Actipro Software Support

Posted 11 years ago by Haibing

After a little research we know that we have set IsLiveSplittingEnabled to true. And we would like to keep in this mode which this line of code is not working. Now, in this case, how could we achive this goal?

Thank you in advance,

Haibing

Answer - Posted 11 years ago by Actipro Software Support - Cleveland, OH, USA

Hello, I see it now with live splitting enabled. Just change the MouseLeave's To to go to "Transparent". That should fix it.

Actipro Software Support

Posted 11 years ago by Haibing

I have added the line of code to override the splitter color and the original XAML to our Application.Resources. I also changed the MouseLeave's To to go to "Transparent". Now the problem is the highlighted red is not following the dragging mouse. How could we solve this problem?

[Modified 11 years ago]

Posted 11 years ago by Actipro Software Support - Cleveland, OH, USA

To remove the red piece, just pull out that SplitterPreviewBrushKey brush definition in your app Resources. That probably isn't needed now that we sorted out the real problem.

Actipro Software Support

Posted 11 years ago by Haibing

Thanks. However, the problem is not we having the highlighted bar, but the highlighted bar is not following the dragging mouse.

Posted 11 years ago by Actipro Software Support - Cleveland, OH, USA

Thanks for sending the sample. When I run it I see the highlight on hover, and it disappears when the mouse leaves the splitter. It also disappears right as the splitter is being dragged and reappears when the mouse button is released (ending the drag). It reappears there since the mouse is hovering over the splitter.

I tried adding some other event triggers for things like mouse down and up but that didn't keep the splitter highlighted during drag. I'm sorry but it doesn't look like there is a XAML way to keep it highlighted during drag when you have live splitting on.

Actipro Software Support

The latest build of this product (v24.1.3) was released 3 months ago, which was after the last post in this thread.

Comments (9)

Add Comment