Change dragged element appearance during .Net MAUI draggesturerecognizer operation - drag-and-drop

How do I change the appearance of the XAML element that is displayed while being dragged during a drag & drop operation in .Net MAUI?
Maybe I should ask to what extent the appearance of the dragged visual can be changed?
Currently the dragged visual is basically a slightly transparent copy of the XAML element on which the DragGestureRecognizer is implemented. I'd like to replace that visual completely, or at least resize it.
I've adapted this example for an MVVM implementation, but I can't seem to find a way to change the appearance of the dragged visual.
Thx

I tried the DragStartingCommand which is executed when a drag gesture is first recognized.
Here is the code in .xmal file. I create a rectangle.
<Rectangle Stroke="Red"
Fill="DarkBlue"
StrokeThickness="4"
HeightRequest="200"
WidthRequest="200"
x:Name="myrec" >
<Rectangle.GestureRecognizers>
<DragGestureRecognizer DragStarting="OnDragStarting" />
</Rectangle.GestureRecognizers>
</Rectangle>
Here is the code behind. I drag the element then it will set the height to 12.
void OnDragStarting(object sender, DragStartingEventArgs e)
{
Shape shape = (sender as Element).Parent as Shape;
e.Data.Properties.Add("Square", new Square(shape.Width, shape.Height));
myrec.HeightRequest = 12;
}
More commands you can use by refering to Add drag and drop gesture recognizers

Related

Drag & drop in custom tree view [duplicate]

I have successfully populated a TreeView via creating a TreeDataProvider and customized the icons and its collapse-able property. Now I want to be able to drag and drop its ViewItem(s) onto a WebView. There are unfortunately no samples for drag and drop. Reading through the TreeView source, ViewItem(s) are created in HeightMap.OnInsertItems() via the TreeView.createViewItem(), from the derived class.
The public TreeView.onInsertItem() would appear to be a great extension point, extending TreeView and onInsertItem() and capturing its ViewItem parameter. This Unfortunately, the creation of the concrete class, ExtHostTreeView, that is ultimately created, is buried in layers of private methods (createExtHostTreeViewer()).
Strangely, the ViewItem has a setter for draggable. However, how would you ever get a reference to the ViewItem to set it? If there is a way to do this please point me at an example. If there is not, I would be glad to fork and implement it. Leaving the existing onInsertItem and perhaps add an array of handlers to be added to with an addOnInsertItemListener() method? Or perhaps use RxJS?
There are so many places this could be used. You could drag template fragments into documents or code, DSL rules into a expert system, configuration file values into parameters or right hand values (generating the code to retrieve the value). Thank you for any assistance.
It seems that drag and drop in custom views is currently not supported. There's a (fairly popular) feature request for it here:
Add drag and drop for contributed tree views (#32592)
As of version 1.66 (March 2022) there is a TreeDragAndDropController which can be used for some drag & drop actions.
In April 2022, their sample focuses on drag & drop within a tree view: https://github.com/microsoft/vscode-extension-samples/blob/main/tree-view-sample/src/testViewDragAndDrop.ts
It is also possible to use the text/url-list type as described in the documentation to allow for dragging files to the editor panel: https://github.com/microsoft/vscode/blob/dc2f5d8dd1790ac4fc6054e11b44e36884caa4be/src/vscode-dts/vscode.d.ts#L9843-L9859
It is not clear to me yet whether it is possible to drag arbitrary data to webviews or to use standard HTML5 drag & drop API in a webview to allow dragging data to a custom tree view.

Draw specified Object Inspector into Rect

I was wondering if there was any method for drawing a default inspector for a given object into a Rect, similar to the other GUI methods?
I'm looking for a simple way of drawing various inspectors for linked objects into a custom EditorWindow.
I had tried to instance the specific editor as of course that contains DrawDefaultIspector, but I just get masses of exceptions from inside SerializePropertyBindings.
Is there a method to draw the default inspector for a given object?
Just found a solution to this using this post.
I just want to show the default inspector, so I can create an instance of a base Editor then fire OnInspectorGUI() in my EditorWindow.OnGUI() code:
void OnGUI()
{
Editor editor = Editor.CreateEditor(this.linkedObject);
editor.OnInspectorGUI();
}
(Obviously I should probably only recreate that editor when the linkedObject changes, but just for the sake of clarity.)
Doesn't allow me to draw into a Rect, but I assume I can cover that requirement with a scroll panel or similar.

resize jPanel on VLCJ fullscreen for controlsPanel

I am using netbeans to create a media player using vlcj-3.8.0.jar.Here is the source code for netbeans users,vlcj gui netbeans based just unzip and open project in netbeans(contains playlist, volume, plays in canvas)I know placing the whole code violates the SSCCE standards but it might be informative for others. Another reason is that if you are a netbeans user then running the code and finding the problem is very easy for you, u wont need to search the entire code. So my problem, all works fine but i am having problem when i toggle the fullscreen. The controlsPanel as you can see in the picture below wont resize and i dont how how to do it. I tried to put the panel in border layout but it messes everything inside it(i have jslider and jlabels inside it).
http://postimg.org/image/kcxuwgjgx/
Here is a code to toggle on and off for fullscreen, where
jPanel2: is in border layout that has canvas inside it,
controlsPanel: panel in absolute layout that has jslider and jlabels has properties i set through netbeans as horizonal size and vertical size as default, horizontal resizable as ticked
private void toggle_fullscreenMouseClicked(java.awt.event.MouseEvent evt) {
if(fullscreen_check==1){
controlPanel.setVisible(true);
titlePanel.setVisible(false);
mediaPlayer.setFullScreen(true);
//at fullscreen the controlPanel should be resized horizontally to the end of the screen
controlPanel.setPreferredSize((new Dimension(1200,100)));
controlPanel.setSize((new Dimension(1200,100)));
controlPanel.revalidate();
//here is the problem:controlPanel stays the same...why??
fullscreen_check=0;
}
else{
mediaPlayer.setFullScreen(false);
Dimension ss = new Dimension (10,10);
jPanel2.setPreferredSize(ss);
jPanel2.setSize(ss);
jPanel2.revalidate();
fullscreen_check=1;
}
} `
I tried to use the code:
controlPanel.setPrefferedSize((new Dimension(1200,900);
controlPanel.revalidate();
//OR:
controlPanel.setSize((new Dimension(1200,900);
controlPanel.revalidate();
but it wont work...any help or idea will be greatly appreciated!! If any of you guys tried my code and make the controlsPanel to be resized to full screen, i will be very grateful!!

MVVM: Handling list item navigation with keyboard in Windows 8

I am totally new to Windows 8 development and I am now facing an issue mixing touch and keyboard navigation using MVVM Light.
So I have a list of view models in a grid view and whenever one of those is selected, navigation to the selected view model is activated. This works totally fine with touch or a mouse, but with a keyboard it can get really confusing. Indeed, the natural behavior would be to navigate the list with the arrows and hit enter when I want to display the item, but here instead, navigation will be activated when simply changing item with the arrow keys which is really confusing for the user.
So how could I do so the navigation could be activated on selection with touch and mouse and with a combination of selection and enter key with the keyboard?
Here is the code I use.
ViewModel:
public ReleaseViewModel SelectedRelease
{
get
{
return selectedRelease;
}
set
{
if(selectRelease != value)
{
selectedRelease = value;
}
// Navigation code here
}
}
View:
<GridView
ItemsSource="{Binding Releases}"
ItemTemplate="{StaticResource ReleaseTemplate}"
ItemContainerStyle="{StaticResource GridViewItemStyle}"
Grid.ColumnSpan="2"
Grid.Row="2"
Padding="116,0,40,46"
SelectedItem="{Binding SelectedRelease, Mode=TwoWay}"/>
In my opinion, coding with the MVVM pattern does not mean that everything code-related should be done in the model. Operations which is related UI beaviors (like navigation) should still be done in the view (the codebehind), by using the available events from the control. Like the GridView's events mouse and keyboard events.
Many may not agree with me on that, but after working by the MVVM pattern for several years in both WPF and Silverlight, I must say that a good combination between the UI-behavior (view) and the control's logic/functionability (model), you will also be forced to put several stuff which concerns the UI only to the codebehind. At least, this is my opinion.
What you could do is to create a class which inherits GridView (let's call it MyDataGrid).
Then you can use the OnKeyDown override and have the navigation go vertica when pressing enter.
You can actually make the MyDataGrid look and behave "out-of-the-box" just like you want so there are no extra code if you want to use the same grid behavior another place in your app (or another app).
The best way I finally found is to use some code behind. But instead of directy navigating from the UI I kept navigation logic in the view models.
So I simply hooked up the ItemClick event from the GridView and in the event handler I casted the Page data context to my view model and then I simply executed the command from the view model. This is not easy to maintain but it surely preserve the separation of concerns of MVVM.
private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
MyViewModel vm = (MyViewModel)this.DataContext;
if(vm.NavigateToSelectionCommand.CanExecute(null))
{
vm.NavigateToSelectionCommand.Execute(e.ClickedItem);
}
}
Still I hope a cleaner and more maintainable solution will come up with time.

How to show a view programmably in a position defined in plugin.xml?

I want to show views (multiple) in my plugin source code using:
showView(id, id2, IWorkbenchPage.VIEW_ACTIVATE)
This view is first closed, shown after my proccess completed.
I defined the view and its positon in plugin.xml as below:
name="..."
icon="..."
category="..."
class="..."
allowMultiple="true"
id="myid"
extension
point="org.eclipse.ui.perspectiveExtensions"
perspectiveExtension
targetID="org.eclipse.jdt.ui.JavaPerspective"
view
ratio="0.5"
relative="org.eclipse.ui.views.ContentOutline"
relationship="stack"
visible="false"
id="myid"
I want to show them top right area of perspective (the same as Outline view).
If I set visible true or open my view manually in GUI, it appears top right as I expected,
but when I use "showView()" above, views always appears at the bottom (console, problems, etc.)
How can I show my views always top right programmably?
You need to add placeholders for the rest of your views, that have a secondary ID. Another entry in your perspectiveExtension with a compound ID and a wildcard should work: myid:*. See IPageLayout javadoc for more information.