Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Zoom Control enable with mouse scroll up and down (Read 7884 times)
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Zoom Control enable with mouse scroll up and down
Mar 28th, 2017 at 7:59am
Print Post  
I added Zoom Control to canvas dashboard, I want work with that feature with mouse scroll up and down, how can I achieve that ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Zoom Control enable with mouse scroll up and down
Reply #1 - Mar 28th, 2017 at 8:41am
Print Post  
There's a ZoomFactor property you could set from MouseWheel event handler -

Code
Select All
diagram.PreviewMouseWheel += (s, e) =>
{
	diagram.SetZoomFactor(
		diagram.ZoomFactor + e.Delta / 20,
		e.GetPosition(diagram.DocumentPlane));
	e.Handled = true;
}; 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Zoom Control enable with mouse scroll up and down
Reply #2 - Mar 28th, 2017 at 8:53am
Print Post  
This is my main window XAML file

Code
Select All
<Window x:Class="MindfusionDigramSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MindfusionDigramSample"
        xmlns:diag="http://mindfusion.eu/diagramming/wpf"
        xmlns:mfc="clr-namespace:MindFusion.UI.Wpf;assembly=MindFusion.Common.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="500"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <diag:Ruler x:Name="MindFusionRuler" ShowIcon="False" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Black" Unit="Inch" Margin="0,0,5,0" FontSize="11">
            <diag:Diagram x:Name="flowchart" AllowDrop="True" RotateCursor="Hand" />
        </diag:Ruler>

        <diag:Overview x:Name="overview" Grid.Column="0" Grid.Row="1" Document="{Binding ElementName=flowchart}"/>
        <diag:NodeListView x:Name="shapeList" Grid.Column="0" Grid.Row="0"/>

        <mfc:ZoomControl
			x:Name="zoomControl"
            Target="{Binding ElementName=flowchart}"
			ScrollStep="40"
			MinZoomFactor="10"
			Height="268"
			VerticalAlignment="Bottom"
			Width="50"
			HorizontalAlignment="Left"
			Panel.ZIndex="1"
			Margin="145,0,0,225" RenderTransformOrigin="0.5,0.5">
            <mfc:ZoomControl.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-0.476"/>
                    <TranslateTransform/>
                </TransformGroup>
            </mfc:ZoomControl.RenderTransform>
        </mfc:ZoomControl>
    </Grid>
</Window> 



So I added mouse event as followings as you said

Code
Select All
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
			shapeList.Items.Add(new ShapeNode { Shape = Shapes.Rectangle, EnabledHandles = AdjustmentHandles.All & ~AdjustmentHandles.ResizeHandles, Bounds = new Rect(0, 0, 60, 30)});

        }

        private void panel1_MouseWheel(object sender, MouseEventArgs e)
        {
            diag.PreviewMouseWheel += (s, e) =>
            {
                diagram.SetZoomFactor(
                    diagram.ZoomFactor + e.Delta / 20,
                    e.GetPosition(diagram.DocumentPlane));
                e.Handled = true;
            };
        }
    } 



but its mentioning 'diag' not in current context
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Zoom Control enable with mouse scroll up and down
Reply #3 - Mar 28th, 2017 at 9:08am
Print Post  
"diagram" from my code is the name of the Diagram control instance, which is called "flowchart" in your Xaml, so replace it.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Zoom Control enable with mouse scroll up and down
Reply #4 - Mar 28th, 2017 at 11:56am
Print Post  
As you mentioned I changed to following

I registered that method on MainWindow constructor like following

[code]
this.MouseWheel += OnMouseWheel;
[/code]

and implemented that method like following

[code]
private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{

flowchart.PreviewMouseWheel += (sender, e) =>
{
flowchart.SetZoomFactor(
flowchart.ZoomFactor + e.Delta / 20,
e.GetPosition(flowchart.DocumentPlane));
e.Handled = true;
};
}
[/code]

but here I'm getting following compile time errors

Error 1

"A local or parameter named 'e' cannot be declared in this scope because that name is used in an enclosing local scope to define a local or parameter"


Error 2

"A local or parameter named 'sender' cannot be declared in this scope because that name is used in an enclosing local scope to define a local or parameter"


  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Zoom Control enable with mouse scroll up and down
Reply #5 - Mar 28th, 2017 at 12:15pm
Print Post  
That was a lambda expression set as handler of flowchart's PreviewMouseWheel event. It should look like this converted to event handler method  -

Code
Select All
flowchart.PreviewMouseWheel += OnMouseWheel;
...
private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    flowchart.SetZoomFactor(
        flowchart.ZoomFactor + e.Delta / 20,
        e.GetPosition(flowchart.DocumentPlane));
    e.Handled = true;
} 

  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Zoom Control enable with mouse scroll up and down
Reply #6 - Mar 29th, 2017 at 4:30am
Print Post  
As you mentioned I changed that, now its zoom in/out with mouse scroll up/down events, and its mouse scroll up/down working with slider

Since I need to limit this zoom in to 200% and Zoom out to 10% I changed code as below

        private void OnMouseWheel(object sender, MouseWheelEventArgs e)
        {
            if (flowchart.ZoomFactor <= 200 && flowchart.ZoomFactor >= 10)
            {
                flowchart.SetZoomFactor(flowchart.ZoomFactor + e.Delta / 10, e.GetPosition(flowchart.DocumentPlane));
                e.Handled = true;
            }   
        }

but if I continuously scroll to zoom in its zooming to 208% then I I try to scroll down to zoom out this canves, but its not zoom out
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Zoom Control enable with mouse scroll up and down
Reply #7 - Mar 29th, 2017 at 6:24am
Print Post  
The if condition will hold when you are at something like 199 current zoom and the value added by SetZoomFactor will then exceed your limits. Either change condition to flowchart.ZoomFactor <= 200 - e.Delta / 10, or remove the condition altogether and set Math.Max(10, Math.Min(200, newZoom)) as new value.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Zoom Control enable with mouse scroll up and down
Reply #8 - Mar 29th, 2017 at 9:05am
Print Post  
thanks for the help now its working as expected,   I changed as following

private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
if (flowchart.ZoomFactor <= 200 && flowchart.ZoomFactor >= 10)
{
flowchart.SetZoomFactor(Math.Max(10, Math.Min(200, flowchart.ZoomFactor + e.Delta / 10)), e.GetPosition(flowchart.DocumentPlane));
e.Handled = true;
}

var item = flowchart;
}

but mouse pointer should be in  X > 0 and Y > 0 location,

how to set ruler x and Y starting point as 0 in default window and maximize window ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Zoom Control enable with mouse scroll up and down
Reply #9 - Mar 29th, 2017 at 5:00pm
Print Post  
The ScrollViewer element used inside Ruler always centers its content when it's smaller than the viewer. You could set a large enough diagram.Bounds to make sure it fills maximized window and scroll viewer, see if code here helps -
http://mindfusion.eu/Forum/YaBB.pl?num=1470217247/1#1

It could also be possible to change ScrollViewer control template to top/left align its content instead of centering it, if you prefer to have a smaller diagram canvas.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Zoom Control enable with mouse scroll up and down
Reply #10 - Mar 30th, 2017 at 8:24am
Print Post  
Thanks its worked,

I setup ruler as following
                   
Code
Select All
<diag:Ruler x:Name="MindFusionRuler" ShowIcon="False" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Black" Unit="Inch" Margin="0,0,5,0" FontSize="11" HorizontalAlignment="Left" VerticalAlignment="Top">
                        <diag:Diagram x:Name="flowchart" AllowDrop="True" RotateCursor="Hand" />
                    </diag:Ruler> 

  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Zoom Control enable with mouse scroll up and down
Reply #11 - May 8th, 2017 at 4:08am
Print Post  
currently my zoom control like this



can I change zoom control theme here
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Zoom Control enable with mouse scroll up and down
Reply #12 - May 9th, 2017 at 4:46am
Print Post  
You can change appearance using Fill, Stroke, CornerRadius and TickPosition properties. If you need to edit the control template, right click the zoom control in VS designer and from context menu select Edit Template -> Edit a Copy command.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint