Shaker/Avalonia/ShakerApp/Views/Setting/NetworkSettingView.axaml

<UserControl
    x:Class="ShakerApp.NetworkSettingView"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:ShakerApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:model="using:ShakerApp.Models"
    xmlns:suki="https://github.com/kikipoulet/SukiUI"
    xmlns:vm="using:ShakerApp.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:DataType="vm:ShakerSettingViewModel"
    DataContext="{Binding Source={x:Static vm:ShakerSettingViewModel.Instance}}"
    mc:Ignorable="d">


    <suki:GlassCard
        Width="600"
        Height="420"
        Margin="4"
        VerticalAlignment="Top">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="36" />
            </Grid.RowDefinitions>
            <suki:GroupBox Header="{DynamicResource WorkingMode}">
                <UniformGrid Margin="0,4,0,0" Columns="2">
                    <StackPanel
                        Height="{StaticResource ItemHeight}"
                        VerticalAlignment="Top"
                        Orientation="Horizontal">
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Text="{DynamicResource WorkingMode}" />
                        <ComboBox
                            Width="120"
                            ItemsSource="{Binding WorkingMode, Converter={StaticResource EnumToCollectionConverter}, Mode=OneTime}"
                            SelectedValue="{Binding Path=WorkingMode}"
                            SelectedValueBinding="{Binding Value}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{local:ResourceBinding Key}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </StackPanel>
                    <StackPanel
                        Height="{StaticResource ItemHeight}"
                        VerticalAlignment="Top"
                        IsVisible="{Binding WorkingMode, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static model:WorkingMode.Local}}"
                        Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center" Text="{DynamicResource EnabledRemote}" />
                        <ToggleSwitch Classes="Switch" IsChecked="{Binding EnabledRemote}" />
                    </StackPanel>

                    <StackPanel
                        Height="{StaticResource ItemHeight}"
                        VerticalAlignment="Top"
                        Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center" Text="{DynamicResource RemoteControlModel}" />

                        <ComboBox
                            Width="120"
                            IsEnabled="{Binding !ServieIsStart}"
                            ItemsSource="{Binding RemoteControlModel, Converter={StaticResource EnumToCollectionConverter}, Mode=OneTime}"
                            SelectedValue="{Binding Path=RemoteControlModel}"
                            SelectedValueBinding="{Binding Value}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{local:ResourceBinding Key}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </StackPanel>

                    <StackPanel
                        Height="{StaticResource ItemHeight}"
                        VerticalAlignment="Top"
                        IsEnabled="{Binding EnabledRemote}"
                        IsVisible="{Binding WorkingMode, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static model:WorkingMode.Local}}"
                        Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center" Text="{DynamicResource AutoStartService}" />
                        <ToggleSwitch Classes="Switch" IsChecked="{Binding AutoStartService}" />
                        <Ellipse
                            Width="12"
                            Height="12"
                            Classes.Start="{Binding ServieIsStart}">
                            <Ellipse.Styles>
                                <Style Selector="Ellipse">
                                    <Setter Property="Fill" Value="Red" />
                                </Style>
                                <Style Selector="Ellipse.Start">
                                    <Setter Property="Fill" Value="Green" />
                                </Style>
                                <Style Selector="Ellipse:disabled">
                                    <Setter Property="Fill" Value="Gray" />
                                </Style>
                            </Ellipse.Styles>
                        </Ellipse>
                    </StackPanel>
                    <StackPanel
                        Height="{StaticResource ItemHeight}"
                        VerticalAlignment="Top"
                        IsEnabled="{Binding !ServieIsStart}"
                        Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center" Text="{DynamicResource RemoteIP}" />
                        <TextBox Width="120" Text="{Binding RemoteIP}" />
                    </StackPanel>
                    <StackPanel
                        Height="{StaticResource ItemHeight}"
                        VerticalAlignment="Top"
                        IsEnabled="{Binding !ServieIsStart}"
                        Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center" Text="{DynamicResource RemotePort}" />
                        <NumericUpDown
                            Width="120"
                            Margin="4,0,0,0"
                            Increment="1"
                            Maximum="65535"
                            Minimum="1"
                            Value="{Binding RemotePort}" />
                    </StackPanel>

                </UniformGrid>
            </suki:GroupBox>
            <StackPanel
                Grid.Row="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                IsEnabled="{Binding EnabledRemote}"
                IsVisible="{Binding WorkingMode, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter={x:Static model:WorkingMode.Local}}"
                Orientation="Horizontal">
                <Button
                    Width="106"
                    Height="36"
                    Command="{Binding StartServiceCommand}"
                    Content="{DynamicResource StartService}"
                    IsEnabled="{Binding !ServieIsStart}" />
                <Button
                    Width="106"
                    Height="36"
                    Margin="120,0,0,0"
                    Command="{Binding StopServiceCommand}"
                    Content="{DynamicResource StopService}"
                    IsEnabled="{Binding ServieIsStart}" />
            </StackPanel>
        </Grid>
    </suki:GlassCard>
</UserControl>