I can't figure it out how make a simple animation where after the click of a button a grid element changes it's size.
I work with MVVM so, like WPF if it's possible I prefere a "full xaml" solution (in my head a simple animation is charged to the view and not to the viewModel).
How can i do it?
Thank you
Maybe you are looking for something like below.
https://github.com/jsuarezruiz/Xamanimation#progress-animations
If not, please refer to the below documentation links for details about Animation.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple
You can also write your own custom animations in Xamarin. Please refer below links.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/custom
In Xaml you should bind your Button into the CommandParameter. To do this,
Step 1 - Give a x:name, step 2 bind it
<Button Command="{Binding MyButtonCommand}"
x:Name="myButton"
CommandParameter="{Binding Source={x:Reference myButton}}"/>
In your ViewModel:
public ICommand MyButtonCommand=> new Command(async(o) =>
{
Button myButton = (Button)o;
await myButton.TranslateTo(50, 0, 400);
});
Related
I'm working on a program that use AvalonDock to open several documents at the same time. And there is a public ribbon which has some common buttons on the top, like this:
Now, Cut, Copy, Paste, Delete can be used by clicking MenuItems of them in ContextMenu.
However, there are some problems when I want to bind these commands to buttons in the ribbon.
Imitating the example of AvalonDock, my XAML is
<DockingManager DocumentsSource="{Binding Documents}" ActiveContent="{Binding ActiveDocument,Mode=TwoWay}">
<DockingManager.LayoutItemTemplateSelector>
<local:PanesTemplateSelector>
<local:PanesTemplateSelector.ShapesDocumentTemplate>
<DataTemplate>
<view:ShapesDocument/>
</DataTemplate>
</local:PanesTemplateSelector.ShapesDocumentTemplate>
</local:PanesTemplateSelector>
</DockingManager.LayoutItemTemplateSelector>
</DockingManager>
And my C# is:
public ObservableCollection<ShapesDocumentViewModel> Documents { get; set; } = new ObservableCollection<ShapesDocumentViewModel>();
So the ActiveDocument is a ViewModel.
In my ShapesDocument, there is a CanvasEx with Cut_Executed,Copy_Executed...
So, how can I bind the CommandTarget? Or there will be some ways to move the Executeds into ViewModel?
<Button Command="{x:Static ApplicationCommands.Cut}" CommandTarget="{Binding ???}"/>
Temporarily, I use MenuItems to replace the buttons. I set the ApplicationCommands in the Control in ShapeDocument UserControl, and binding them to MenuItems without setting the command targets.
I guess that WPF can automaticly search the target of menuitems, but not button. So I can change them to MenuItems, and change the MenuItems' style to imitate buttons.
It's not very elegant but very convinent, with very simple codes.
I want to program a dynamic Detail View. Like a user clicked on an Item then he sees the detail view. Now he sees all Values, but when he only want to see a few values, he click on a config Button in this view and a second view opens where he can select and unselect all types of values. Like he dont want to see the Description, the he deselect it in the second view, and it´s no longer visible in the first view.
The only way for me to implement something like this is to programm a Function which generates the first view. The view would be a UI-Element. Which is then returned to the Windows where the UI-Element is set a child of an Element on the Window. But I think this isn´t a good way. How do you would solve this problem?
Thanks for every hint :)
If I understand well you want
List -> Details -> MoreDetails/Edit
Depending on what platform you are creating is a bit different but the idea is the following:
<ItemsControl ... x:Name="ItemsList" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction
Command="{Binding Datacontext.ShowItemDetails, ElementName=ItemsList}" CommandParameter="{Binding}"/>
</core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
</DataTemplate>
</ItemsControl>
Now when you tap the grid you can show a PopupControl with the details and the DataContext:
public Command<ItemClass> ShowPopup
{
get
{
return new Command<ItemClass>((i)=>
{
//Create the Popup
});
}
}
In case you are not using MVVM you can add the Command in code behind and place in the page contructor this.DataContext = this; and place the previous command there.
And now create a control for the content of the popup, bind the properties to the item details, now add another behavior with a command in that control and unhide the controls for edit mode or more details mode
You could have for each detail item a property bool ItemXIsVisible which is bound to a checkbox in the config view, and to the IsVisible property of the X control in the detail view?
This title might be inappropriate for question itself but stay with me I’ll change it if you have better suggestion. This is my first wpf application so I might missed some key concept… I did google, but I failed to find correct approach.
I am building wpf application using MvvM Light and MUI and I got into trouble with item bindings, ie communication between view models. Now, I am sure that I wouldn't have this problem if I used single View model for the Page and all user controls in it, but I think I overdid it on my first try.
I have one Main Window in application and pages as the user controls. In each page I have several other user controls and each one of them have its own view model and its own logic for doing stuff but in the end they all depend on the corresponding VM with data grid. We could think of them as poor man angular directives. Each user control have its data context defined like so:
DataContext="{Binding ViewModelName, Source={StaticResource Locator}}
Layout looks like this: Wpf Layout
Look at this way, DG1 in VM1 is Master (customer) and UC3 and UC4 are Details (orders). If I add new order to the customer, I would like it to be updated in the DG1 without refreshing entire grid.
In VM1 Data Grid 1 selection changed I am firing commands to set property values of depending user controls.
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<mvvm:EventToCommand Command="{Binding ErrorWorkflow.GetErrorWorkflowCommand, Mode=OneWay, Source={StaticResource Locator}}" CommandParameter="{Binding SelectedError.WF_REF}" />
<mvvm:EventToCommand Command="{Binding ErrorDetails.GetErrorCaseDetailsCommand, Mode=OneWay, Source={StaticResource Locator}}" CommandParameter="{Binding SelectedError}" />
</i:EventTrigger>
</i:Interaction.Triggers>
That part works ok, but when I change the value of in the depending VM3 for both VM3 and VM1, VM1 property values are not changed even though I call RaisePropertyChanged or setting property explicitly by hand like SelectedError.Status = “somethingnew”.
On the other hand, if I clear selection form the data grid, depending view models stay bound (text boxes on them preserve the value because they are referencing properties on their own VM3).
All View Models derive from ViewModelBase from mvvmLight and all models from ObservableObjects (I know that I should use Poco, but apparently I have to create each property on VM too). Example:
public const string SelectedErrorPropertyName = "SelectedError";
private ErrorLog _selectedError;
public ErrorLog SelectedError
{
get
{
return _selectedError;
}
set
{
Set(() => SelectedError, ref _selectedError, value);
}
}
I think that Messenger would be an overkill considering the size of the application (only few pages like this one).
Should I change the Page to use only one View Model and share them for each user control or am I missing something obvious here?
If you think that I am missing some key information in this example please tell me and I’ll update.
Thank you in advance for any advice, cheers!
You should never change the Page to only one View Model and Messenger is not an overkill. The MVVM Light Messenger is built to solve exact the problem (communication between VMs) you are having at the moment. You should use it.
For further information about the messaging within MVVM Light, Jesse Liberty of Microsoft has a great tutorial on how to make use of it.
I have an application where I have a UserControl with a toolbar in it. This toolbar has a button Execute which in turn has its command bound to an ICommand derived class that the viewmodel exposes as a property.
<Button Grid.Row="0" Command="{Binding ExecuteCommand}">Execute</Button>
Now, I'd like to bind this to a keyboard shortcut (F5) as well. This needs to be bound in the context of the UserControl since, it's only applicable if this usercontrol is visible at the moment.
Another option is to bind it to the KeyDown of the textbox that actually contains the text to execute, but I'm really shaky when it comes to how to route the event from the control to the command in the viewmodel without really ugly hacks in the code-behind of the usercontrol.
Any pointers are appreciated!
There was another answer that disappeared for some reason. This worked fine:
<UserControl.InputBindings>
<KeyBinding Key="F5" Command="{Binding ExecuteCommand}" />
</UserControl.InputBindings>
I'd like to give credit to that guy if possible. Please appear again :)
Afaik, there isn't a way to directly bind to a keypress, but there are some work arounds. It looks like others have had this problem as well, have you seen this post? My other suggestion is to look into attached commands.
What i am basically looking out for is a combination of controls that work as 1 whole. I have no idea what the best way would be to start solving this problem in WPF, either a custom control, existing control, slider...?
Only thing i do not want are 3th party controls and the such.
When a certain condition is met a button with text will be placed inside the slider. Every time when certain conditions are met this situation will keep on happening and buttons will be placed inside the border field.
So it could be possible i have like 10 buttons after each other inside the border. The 2 navigation buttons to the left and right serve as navigation between all those buttons so all can actually get view and pressed when needed for further actions.
Picture that illustrates what i wish to achieve:
You can start with something simple as a StackPanel (you dont need to put it in a page but i wanted to make it copy paste friendly):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Content="Left"/>
<ListBox>
<ListBoxItem>btnTest 10:00h</ListBoxItem>
<ListBoxItem>btnTest 11:00h</ListBoxItem>
</ListBox>
<Button Content="Right"/>
</StackPanel>
</Page>
Then focus on the appearance and behavior separately.
You need to learn WPF styles, so you can get the colors and layout as in your sample picture. This will also let you make the ListBox horizontal.
Look into the concept of a ViewModel to learn how to populate the ListBox with items. And event handlers for the buttons.
Its a very broad question but I hope this gives you a start.