Adaptive design in Avalonia

[ParadiseFallen]

Hi. How i can write adaptive design in Avalonia like html markup. Want to use smth like bootstrap. Where i can set coluumns (as now i can set it in grid) and breakpoints for diffrent window size to make view adaptive. (change direction of layout width of elements, etc)

[maxkatz6]

There is no any specific implementation like bootstrap window size breakpoint in Avalonia, but you are free to implement your own.

Previously I did simple approach with subscribing on Window.Bounds property changed and setting style class on the window depending on the width. And later this class was easily accessible from style selectors. You can move this subscription to some kind of attached property as well to reuse later.

@wieslawsoltes created behavior based on Behavior SDK (ported from UWP) which does the same, but in a bit convenient way. Example.

[wieslawsoltes]

You have a good example, but I'm wondering what about a complete change? I mean to make 1 instead of 3 columns or completely rebuild the view (dock some element or hide several buttons in the drop-down list as in the materials you attached)

You can use something like this to bind grid columns and rows:

https://github.com/zkSNACKs/WalletWasabi/blob/master/WalletWasabi.Fluent/Controls/BindableGrid.cs

Example usage:
https://github.com/zkSNACKs/WalletWasabi/blob/e31697c6eda6b5452bb13e64299ab220071b9f33/WalletWasabi.Fluent/Views/Wallets/WalletView.axaml#L127

[amasidlovermedoc]

I have the same question but either 3 years later the answers above are no longer valid or I'm not yet experienced enough with Avalonia to actually implement any of them.

I have a MainWindow.axaml with a SplitView that is currently showing a 'Pane' and a main view.

 <Window ...SNIP...>
        <Window.DataContext>
            <vm:MainWindowViewModel/>
        </Window.DataContext>
        <SplitView IsPaneOpen="False"
           DisplayMode="Overlay"
           OpenPaneLength="300">
            <SplitView.Pane>
                <TextBlock  Text="Pane"
                            FontSize="24"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"/>
            </SplitView.Pane>

            <rx:RoutedViewHost x:Name="RoutedViewHost" Router="{Binding Router}">
                <rx:RoutedViewHost.DefaultContent>
                    <TextBlock Text="Default Content"></TextBlock>
                </rx:RoutedViewHost.DefaultContent>
                <rx:RoutedViewHost.ViewLocator>
                    <local:ViewLocator />
                </rx:RoutedViewHost.ViewLocator>
            </rx:RoutedViewHost>
        </SplitView>
  </Window>

What I would like to achieve is for the 'Pane' to always show if the screen is over 600px wide and to be visible (overlay) if a 'hamburger' is clicked.

I've found a lot of approaches but as a beginner to Avalonia and MVVM (and with a background in C++/C#/Perl/Assembler/JS/CSS/HTML etc. but very little event driven coding) I've found all of the examples and answers to questions to leave me with quite a lot of questions.

Approaches:

Trying using the examples above

I followed the links in question #6130 and although the link to 'WalletWasabi' looked like a perfect example, when I tried following how it was setting IsSmallLayout, IsNormalLayout etc. I couldn't find the code in the repo and it looks like that project no longer uses that style. I looked at https://github.com/wieslawsoltes/AvaloniaResponsiveLayout/blob/master/AvaloniaResponsiveLayout/Behaviors/ScreenPseudoClassesBehaviour.cs and that looked perfect and I had an example that compiled but when I tried running it I got an exception that I couldn't set Classes on the main Window. Finally I looked at https://github.com/wieslawsoltes/TilePanelDemo/blob/main/TilePanelDemo/MainWindow.axaml but that seemed to need the user to manually select the window size from a dropdown - I've since come back to it and I actually think it creates a new class based on Panel and then uses a local namespace in the xaml to use it, I think this might be a solution for me, but it seems to require an enormous number of methods in TilePanel.cs to implement it (plus I've tried downloading it and building it but it uses a very, very old version of Avalonia and when I updated it to latest it complained about a lot of Avalonia methods missing).

Add a binding to the Window's Width and Height Properties###

As per this question https://stackoverflow.com/questions/2673600/problems-with-binding-to-window-height-and-width - I added Width="{Binding WindowWidth, mode=TwoWay}" to the Window element of the MainWindow.axaml then I followed https://docs.avaloniaui.net/docs/guides/data-binding/inotifypropertychanged to try and add an eventhandler that would... and then I got lost as I wasn't really sure whether to try and directly do something to the dock or set some kind of property (style setter?) that could be used - or whether to try and bind to that event in the c# somewhere.

Use this.GetObservable(ClientSizeProperty).Subscribe(Resize) (from #3237)###

However, when I try and add this to MainWindowViewModel.cs my MainWindowViewModel has no such method; MainWindowViewModel implements ReactiveObject. I can't find any documentation that tells me what interface I would need to add in order to use GetObservable against the main window.

Window.Bounds property changed and setting style class on the window###

This sounds like exactly what I need to do, but when I search for how to subscribe to changes to a property I can only find https://docs.avaloniaui.net/docs/guides/data-binding/binding-from-code which again tells me to use GetObservable (which doesn't seem to be valid for Window) or to use 'Bind' - but I get as far as Window.Bind(Window.BoundsProperty - and then I'm not sure what to put as the 'source'.

I feel like this is probably achieveable in a handful of lines of code, but I've yet to find an example that is actually complete enough for me to follow well enough to implement my own variant.

I'd be really grateful if someone could either point me to a recent complete example or try and point me to documentation that gives me complete examples of doing some of the above things rather than giving me code snippets without even telling me which class they are supposed to be implemented on (which interfaces the class should have to make them work).

[stevemonaco]

This is a very old topic. I would recommend starting a new thread. I assume mostly everything from AdaptiveResponsiveLayout was migrated into Avalonia.Xaml.Behaviors. ie. The various AdaptiveBehavior / AdaptiveClassSetter

There's no docs to point you to, so you'll need to clone the repo / read the source.

[amasidlovermedoc]

That example was perfect I was able to do the following:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:vm="using:ZymoTestOneApp.ViewModels"
        xmlns:rx="http://reactiveui.net"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
        xmlns:ir="clr-namespace:Avalonia.Xaml.Interactions.Responsive;assembly=Avalonia.Xaml.Interactions.Responsive"
        xmlns:local="clr-namespace:ZymoTestOneApp"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="ZymoTestOneApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="ZymoTestOneApp">
        <Window.DataContext>
            <vm:MainWindowViewModel/>
        </Window.DataContext>
        <Window.Styles>
    <Style Selector="SplitView.adaptive">
      <Setter Property="PanePlacement" Value="Left" />
      <Setter Property="CompactPaneLength" Value="80" />
      <Setter Property="OpenPaneLength" Value="200" />
      <Setter Property="PaneBackground" Value="Transparent" />
      <Setter Property="IsPaneOpen" Value="False" />
      <Setter Property="DisplayMode" Value="Inline" />
      <Setter Property="(i:Interaction.Behaviors)">
        <i:BehaviorCollectionTemplate>
          <i:BehaviorCollection>
            <ir:AdaptiveBehavior SourceControl="{Binding $parent[TopLevel]}">
              <ir:AdaptiveClassSetter MinWidth="0" MaxWidth="500" ClassName="small" />
              <ir:AdaptiveClassSetter MinWidth="500" MaxWidth="900" ClassName="medium" />
              <ir:AdaptiveClassSetter MinWidth="900" MaxWidth="Infinity" ClassName="wide" />
            </ir:AdaptiveBehavior>
          </i:BehaviorCollection>
        </i:BehaviorCollectionTemplate>
      </Setter>
    </Style>
    <Style Selector="SplitView.small">
      <Setter Property="IsPaneOpen" Value="False" />
      <Setter Property="DisplayMode" Value="Inline" />
    </Style>
    <Style Selector="SplitView.medium">
      <Setter Property="IsPaneOpen" Value="False" />
      <Setter Property="DisplayMode" Value="CompactInline" />
    </Style>
    <Style Selector="SplitView.wide">
      <Setter Property="IsPaneOpen" Value="True" />
      <Setter Property="DisplayMode" Value="Inline" />
    </Style>
        </Window.Styles>
        <SplitView
           Classes="adaptive"
           Name="AdaptiveSplitView"
           DisplayMode="Overlay"
           OpenPaneLength="300">
            <SplitView.Pane>
                <TextBlock  Text="Pane"
                            FontSize="24"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"/>
            </SplitView.Pane>

            <rx:RoutedViewHost x:Name="RoutedViewHost" Router="{Binding Router}">
                <rx:RoutedViewHost.DefaultContent>
                    <TextBlock Text="Default Content"></TextBlock>
                </rx:RoutedViewHost.DefaultContent>
                <rx:RoutedViewHost.ViewLocator>
                    <local:ViewLocator />
                </rx:RoutedViewHost.ViewLocator>
            </rx:RoutedViewHost>
        </SplitView>
</Window>

Which gives exactly the kind of effect I'm looking for - thanks for the pointer. I will try and document a full example as I go along and find an appropriate place to post it.

[stevemonaco]

FYI, the namespaces for i: and ir: shouldn't be necessary anymore. Those components should be part of the default Avalonia namespace (but still requires adding the NuGet package).

[wieslawsoltes]

Some examples using style selectors and width breakpoints https://github.com/wieslawsoltes/TilePanelDemo/blob/main/TilePanelDemo/MainWindow.axaml