avalonia-docs icon indicating copy to clipboard operation
avalonia-docs copied to clipboard

How to show and hide a split view pane with mvvm guide

Open Nemonek opened this issue 1 year ago • 7 comments

Hey, I've been looking around the Avalonia docs for a while and I spotted this guide with written "to do". I kept an eye on it for a while and I decided to write it. So here's my pull requeste. I hope everything is in order.

Nemonek avatar Sep 02 '24 12:09 Nemonek

I have added some things I think should be addressed. But to be clear: I am not an Avalonia dev so it's also not really up to me either.

thevortexcloud avatar Sep 06 '24 11:09 thevortexcloud

I have added some things I think should be addressed. But to be clear I am not an Avalonia dev so it's also not really up to me either.

Hey, thank you so much for the time! This is my fisrt time trying to contribute to a repository, and every advice or constructive criticism is always welcome! I already fixed/changed the most of what you addressend, except for the major things that I will fix tomorrow. Feel free to review it and point out other problems and/or corrections you think should be done. I will write another comment once I completed what remains to be done.

Just one question: to make a framework agnostic approach do you think it's ok to have a section with Using ReactiveUI and another with "Using INotifypropertyChanged"?

Nemonek avatar Sep 06 '24 21:09 Nemonek

Hey, thank you so much for the time! This is my fisrt time trying to contribute to a repository, and every advice or constructive criticism is always welcome!

Thank you for the PR, and welcome. It's appreciated!

Just one question: to make a framework agnostic approach do you think it's ok to have a section with Using ReactiveUI and another with "Using INotifypropertyChanged"?

That's fine with me.

thevortexcloud avatar Sep 06 '24 22:09 thevortexcloud

Hello @Nemonek

first of all thank you for the contribution. However I have one idea to make this sample even easier to explore. We have https://github.com/AvaloniaUI/Avalonia.Samples where we want to create tutorials and detialed samples. These can be linked from the docs. Benefit is that anyone can just grab the source, download it and play around. From what I see your sample would fit perfectly here. What do you think?

timunie avatar Sep 09 '24 15:09 timunie

Alright, so, I fixed some things that were to be done, and I also added the parts with the framework agnosti approach as suggested. Hello @timunie and thank you for the proposal! I think it would be a good idea and I'd love to do so! Just some questions though, as I said I know have the code with both Reactive UI and without. Should I upload the one with Reactive UI, the one without or both? Also, should I rename the project from How to show and hide ecc... to like "Show and hide a split view pane with MVVM"?

Nemonek avatar Sep 09 '24 17:09 Nemonek

I think both would be fine. Make it a draft PR for now as I may want to feedback about the sample beforehand. I'm thinking about a Hamburger Menu like solution for the demo, could be under custom controls.

What I don't understand is why we use a button instead of a togglebutton. A toggleButton can just be bound to IsChecked and we are there without much hassle. This is why I want to see your sample life to understand what may improve.

timunie avatar Sep 09 '24 18:09 timunie

Ok, after playing a bit with Github desktop I managed to fork the repository. Anyway, I uploaded both the projects in the same directory as the main solution, as I don't know if you want to put those in the MVVM folder or another. Here's the link. I also renamed both projects, as I firstly copy pasted the project with reactive UI on my pc and just removed it from the copy.

For what regards the toggle button, well, I hadn't tought of that; sure it would be better and especially simpler to use that, as there wouldn't even be the need for a command. Just a simple binding. Let me know what should be modified and I'll take care of it!

Nemonek avatar Sep 10 '24 16:09 Nemonek

I've just tried running this locally, and perhaps it's my config, but it was full of issues (it kept crashing Docusaurus). If someone can sanity check that it at least works, I'll spend some more time looking at it.

MikeCodesDotNET avatar Dec 29 '24 17:12 MikeCodesDotNET

If you need to know if the example works, yes, it did when I created the branch and there's the code in a branch on Avalonia.Samples ( If needed I can upgrade the code to the latest Avalonia's version and check if it still works as it should). If you need to know if it works with docusaurus I'll try to install and run everything as soon as I get home in about 40/60 min and if it doesn't I'll try my best to understand why ( I never used docusaurus so I can't assure anything ).

Nemonek avatar Dec 30 '24 10:12 Nemonek

Hey @Nemonek ,

many thanks for all your hard work that went into this PR. It is really appreciated. However, we think that this is a bit too specialized to go into the docs the way it is.

Below is a snippet that shows all what is needed to make it work:

<SplitView PaneBackground="Aqua" DisplayMode="CompactOverlay" IsPaneOpen="{Binding IsPaneOpen}">
    <SplitView.Pane>
        <DockPanel>
            <ToggleButton DockPanel.Dock="Top" IsChecked="{Binding $parent[SplitView].IsPaneOpen}" 
                          Content="+" />
            <TextBlock Text="Other Content"></TextBlock>
        </DockPanel>
    </SplitView.Pane>
</SplitView>

[!NOTE] We already have other places in the docs explaining the MVVM pattern and co, so no need to repeat it here.

I will close this PR for the above reasons. Hope you can understand this (hard) decision.

All the best

Tim

timunie avatar Dec 30 '24 19:12 timunie