Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix MVVM Dialog Sample #107

Merged
merged 2 commits into from
Dec 6, 2024
Merged

Fix MVVM Dialog Sample #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13cf7ec
Fix MVVM Dialog Sample
timunie Nov 25, 2024
9cc5a4f
use full version syntax
timunie Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/Avalonia.Samples/ViewInteraction/MvvmDialogSample/MvvmDialogSample.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@
<None Remove=".gitignore" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Avalonia" Version="11.0.5" />
<PackageReference Include="Avalonia.Desktop" Version="11.0.5" />
<PackageReference Include="Avalonia" Version="11.2.1" />
<PackageReference Include="Avalonia.Desktop" Version="11.2.1" />
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.5" />
<PackageReference Include="Avalonia.ReactiveUI" Version="11.0.5" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.5" />
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.2.1" />
<PackageReference Include="Avalonia.ReactiveUI" Version="11.2.1" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="11.2.1" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.0" />
</ItemGroup>
</Project>
14 changes: 8 additions & 6 deletions src/Avalonia.Samples/ViewInteraction/MvvmDialogSample/README.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ We assume you already now how the MVVM pattern works and how dialogs, such as fi

== Solution 1 : Use ReactiveUI-Interactions

WARNING: Solution 1 requires the use of Avalonia 11.2.0 or higher due to a breaking change in ReactiveUI.

In this section you will learn how to use Reactive UI https://www.reactiveui.net/docs/handbook/interactions/[[`Interactions`\]] in order to interact with your `View`.

=== Step 1: Setup the ViewModel
Expand Down Expand Up @@ -70,9 +72,9 @@ The `Interaction` is a generic class, where the first parameter defines the inpu

We add a `ReactiveUserControl` as your view. This control gives us the ability to register a handler for our interactions. Let's add this handler in the UserControls code behind:

[source,cs]
[source,csharp]
----
private async Task InteractionHandler(InteractionContext<string?, string[]?> context)
private async Task InteractionHandler(IInteractionContext<string?, string[]?> context)
{
// Get our parent top level control in order to get the needed service (in our sample the storage provider. Can also be the clipboard etc.)
var topLevel = TopLevel.GetTopLevel(this);
Expand All @@ -85,23 +87,23 @@ private async Task InteractionHandler(InteractionContext<string?, string[]?> con
Title = context.Input
});

context.SetOutput(storageFiles?.Select(x => x.Name).ToArray());
context.SetOutput(storageFiles.Select(x => x.Name).ToArray());
}
----

NOTE: We are using an async Task to not block the UI. As parameter we need to pass an `InteractionContext` which has one generic parameter for the input (in our case a string for the dialog title) and one for the output (in our case an array of selected files).
NOTE: We are using an async Task to not block the UI. As parameter we need to pass an `IInteractionContext` which has one generic parameter for the input (in our case a string for the dialog title) and one for the output (in our case an array of selected files).

In the constructor of our `ReactiveUserControl` we need to setup the interaction inside `this.WhenActivated` like shown below:

[source,C#]
[source,csharp]
----
public InteractionView()
{
InitializeComponent();

this.WhenActivated(d =>
{
d(ViewModel.SelectFilesInteraction.RegisterHandler(this.InteractionHandler));
d(ViewModel!.SelectFilesInteraction.RegisterHandler(this.InteractionHandler));
});
}
----
Expand Down
6 changes: 3 additions & 3 deletions src/Avalonia.Samples/ViewInteraction/MvvmDialogSample/Views/InteractionView.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ public InteractionView()

this.WhenActivated(d =>
{
d(ViewModel.SelectFilesInteraction.RegisterHandler(this.InteractionHandler));
d(ViewModel!.SelectFilesInteraction.RegisterHandler(this.InteractionHandler));
});
}

private async Task InteractionHandler(InteractionContext<string?, string[]?> context)
private async Task InteractionHandler(IInteractionContext<string?, string[]?> context)
{
// Get our parent top level control in order to get the needed service (in our sample the storage provider. Can also be the clipboard etc.)
var topLevel = TopLevel.GetTopLevel(this);
Expand All @@ -33,7 +33,7 @@ private async Task InteractionHandler(InteractionContext<string?, string[]?> con
Title = context.Input
});

context.SetOutput(storageFiles?.Select(x => x.Name).ToArray());
context.SetOutput(storageFiles.Select(x => x.Name).ToArray());
}
}
}