TProPCMonitor/LoraGamepad/Views/TProView.axaml

<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"
             xmlns:viewModels="clr-namespace:LoraGamepad.ViewModels"
             xmlns:eventBinder="clr-namespace:EventBinder;assembly=EventBinder.Avalonia"
             mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="400"
             x:Class="LoraGamepad.Views.TProView">
    <UserControl.DataContext>
        <viewModels:TProViewModel/>
    </UserControl.DataContext>
    <!-- 样式设置 -->
    <UserControl.Styles>
        <Style Selector="Button.open">
            <Setter Property="Background" Value="{DynamicResource DarkBlueBrush}"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="18"/>
        </Style>
        <Style Selector="Button.close">
            <Setter Property="Background" Value="{DynamicResource DarkRedBrush}"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="18"/>
        </Style>
        <Style Selector="Button.open:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource BrightBlueBrush}"/>
            <Setter Property="TextBlock.Foreground" Value="White"/>
        </Style>
        <Style Selector="Button.close:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource BrightRedBrush}"/>
            <Setter Property="TextBlock.Foreground" Value="White"/>
        </Style>
        <Style Selector="Slider">
            <Setter Property="TickFrequency" Value="10"/>
            <Setter Property="TickPlacement" Value="BottomRight"/>
            <Setter Property="Maximum" Value="100"/>
            <Setter Property="Minimum" Value="-100"/>
        </Style>
    </UserControl.Styles>
    <!-- 页面布局 -->
    <Grid RowDefinitions="60,*,40,2*">
        <Grid Grid.Row="0" Background="Blue" ColumnDefinitions="*,2*,2*,*">
            <Slider Grid.Column="0" Width="80" HorizontalAlignment="Center"/>
            <ComboBox Grid.Column="1" SelectedIndex="0" VerticalAlignment="Center" Width="120" HorizontalAlignment="Right" Margin="10,0"
                      Items="{Binding PortList}" 
                      SelectedItem="{Binding PortSelectItem}"
                      PointerPressed="{eventBinder:EventBinding OnPortListComboBoxPressed}">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock FontSize="18" Foreground="White" Text="{Binding PortName}"/>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <Button Grid.Column="2" Classes="open" Command="{Binding OpenPort}" IsVisible="{Binding IsOpenPortButtonVisible}"
                    HorizontalAlignment="Left" Margin="0,0,10,0" Content="打开串口" HorizontalContentAlignment="Center" Width="100"
                    Name="BtnPortOpen">
            </Button>
            <Button Grid.Column="2" Classes="close" Command="{Binding ClosePort}"  IsVisible="{Binding IsClosePortButtonVisible}"
                    HorizontalAlignment="Left" Margin="0,0,10,0" Content="关闭串口" HorizontalContentAlignment="Center" Width="100"
                    Name="BtnPortClose">
            </Button>
            <Button Grid.Column="3" Width="100" Height="40"/>
        </Grid>
        <Grid Grid.Row="1" Background="Gray" ColumnDefinitions="2*,*,4*,*,2*">
            <Button Grid.Column="0" Width="80" Height="60" HorizontalAlignment="Center"/>
            <Slider Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center"/>
            <Slider Grid.Column="3" Orientation="Vertical" HorizontalAlignment="Center"/>
            <Button Grid.Column="4" Width="80" Height="60" HorizontalAlignment="Center"/>
        </Grid>
        <Grid Grid.Row="2" Background="Yellow">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Width="40" Margin="10"/>
                <Button Width="40" Margin="10"/>
                <Button Width="40" Margin="10"/>
                <Button Width="40" Margin="10"/>
                <Button Width="40" Margin="10"/>
                <Button Width="40" Margin="10"/>
            </StackPanel>
        </Grid>    
        <Grid Grid.Row="3" Background="Green" ColumnDefinitions="*,2*,*">
            <Grid Grid.Column="0">
                <Slider VerticalAlignment="Center" 
                        Value="{Binding SliderValue.LeftVerticalValue}"/>
                <Slider Orientation="Vertical" HorizontalAlignment="Center"
                        Value="{Binding SliderValue.LeftHorizonValue}"/>
            </Grid>
            <Grid Grid.Column="1" Background="Purple">
                <TextBox Text="Hello T-Pro!"/>
            </Grid>
            <Grid Grid.Column="2">
                <Slider VerticalAlignment="Center"
                        Value="{Binding SliderValue.RightHorizonValue}"/>
                <Slider Orientation="Vertical" HorizontalAlignment="Center"
                        Value="{Binding SliderValue.RightVerticalValue}"/>
            </Grid>
        </Grid>
    </Grid>
</UserControl>