AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.73k stars 2.22k forks source link

Avalonia UserControl in Browser don't work #9005

Closed Makstvell closed 2 years ago

Makstvell commented 2 years ago

When I start the application on Desktop - all right. But when I start on WebAssembly sever - No;

My own user controls on browser web assembly - don't work.

But on desktop - work.

But one moment - it is work but when I click to button - error

image _

_ image

<Paginator:Paginator Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="5" PageCount="{Binding PageCountP}" CurrentPage="{Binding CurrentPageP}"></Paginator:Paginator>

Desktop: image

Web: image

using Avalonia;
using Avalonia.Controls;
using Avalonia.Data;
using ReactiveUI;
using System.Diagnostics;
using System.Reactive;
using System.Threading.Tasks;

namespace Application_EKP.Paginator
{
    public partial class Paginator : UserControl
    {

        public static readonly AvaloniaProperty<int> PageCountProperty =
            AvaloniaProperty.Register<Paginator, int>(nameof(PageCount),1, defaultBindingMode: BindingMode.TwoWay);

        public int PageCount
        {
            get => (int)GetValue(PageCountProperty);
            set
            {
                SetValue(PageCountProperty, value);
                CheackIfNormalValue();
            }
        }

        public static readonly AvaloniaProperty<int> CurrentPageProperty =
            AvaloniaProperty.Register<Paginator, int>(nameof(CurrentPage),1, defaultBindingMode: BindingMode.TwoWay);

        public int CurrentPage
        {
            get => (int)GetValue(CurrentPageProperty);
            set
            {
                SetValue(CurrentPageProperty, value);
                CheackIfNormalValue();
            }
        }

        public Paginator()
        {
            InitializeComponent();

            NextClickCommand = ReactiveCommand.Create(NextClick);
            PreviusClickCommand = ReactiveCommand.Create(PreviusClick);

        }

        public static readonly AvaloniaProperty<ReactiveCommand<Unit, Unit>> NextClickCommandProperty =
            AvaloniaProperty.Register<Paginator, ReactiveCommand<Unit, Unit>>(nameof(NextClickCommand));

        public ReactiveCommand<Unit, Unit> NextClickCommand
        {
            get => (ReactiveCommand<Unit, Unit>)GetValue(NextClickCommandProperty);
            set => SetValue(NextClickCommandProperty, value);
        }
        private void NextClick()
        {
            CurrentPage = CurrentPage < PageCount ? CurrentPage + 1 : CurrentPage;

        }

        public static readonly AvaloniaProperty<ReactiveCommand<Unit, Unit>> PreviusClickCommandProperty =
           AvaloniaProperty.Register<Paginator, ReactiveCommand<Unit, Unit>>(nameof(PreviusClickCommand));

        public ReactiveCommand<Unit, Unit> PreviusClickCommand
        {
            get => (ReactiveCommand<Unit, Unit>)GetValue(PreviusClickCommandProperty);
            set => SetValue(PreviusClickCommandProperty, value);
        }
        private void PreviusClick()
        {
            CurrentPage = CurrentPage > 1 ? CurrentPage - 1 : 1;

        }

        private void CheackIfNormalValue()
        {
            if(CurrentPage > PageCount)
            {
                CurrentPage = PageCount;
            }
            if(CurrentPage < 1)
            {
                CurrentPage = 1;
            }
        }

    }
}
<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Application_EKP.Paginator.Paginator"
             Background="#212121"
             x:Name="PaginatorC">

    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="10"/>
            <RowDefinition/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition/>
            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Button Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"  Grid.Row="1" Command="{Binding PreviusClickCommand, ElementName=PaginatorC}">
            <Image Source="/Assets/LeftButton.png" VerticalAlignment="Center"></Image>
        </Button>

        <DockPanel HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="3"  MinHeight="30" MinWidth="200">
            <TextBox Text="{Binding CurrentPage, ElementName=PaginatorC}" HorizontalAlignment="Center"  VerticalAlignment="Center" TextAlignment="Center"></TextBox>
            <Panel Width="5"/>
            <TextBlock TextAlignment="Center" HorizontalAlignment="Center"  VerticalAlignment="Center">
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}From: {0}">
                        <Binding Path="PageCount" ElementName="PaginatorC" />
                    </MultiBinding>

                </TextBlock.Text>
            </TextBlock>
        </DockPanel>

        <Button Grid.Column="5" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="1" Command="{Binding NextClickCommand, ElementName=PaginatorC}">
            <Image Source="/Assets/RightButton.png" VerticalAlignment="Center" ></Image>
        </Button>

    </Grid>

</UserControl>
Makstvell commented 2 years ago

It's my bad, I have ReactiveUI and Avalonia.ReactiveUI packages. User Control has two buttons that use ReactiveUI or Avalonia.ReactiveUI and I must delete one package. In Desktop I setup UseReactiveUI. But in Web I can't do this.

Solution - DELETE all packages and download by Avalonia