SukiUI icon indicating copy to clipboard operation
SukiUI copied to clipboard

[Bug] Animation bug when opening the settings page for the first time

Open yuzh0816 opened this issue 8 months ago • 0 comments

Check the following items

  • [x] I have looked up relevant Issue

Description of the issue

When opening the settings page with a small width, the settings page will shrink to the small size.

https://github.com/kikipoulet/SukiUI/assets/46953451/ddae3ff3-7113-46b8-8949-10c919969e5a

Package Version

Latest

Environment

Windows 11 22635

Expected Behavior

The page should detect the right width, then if size is changed, do the DockPanel_SizeChanged() function.

Reproduction

<UserControl x:Class="UotanToolbox.Features.Settings.SettingsView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="clr-namespace:SukiUI.Controls;assembly=SukiUI"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:models="clr-namespace:SukiUI.Models;assembly=SukiUI"
             xmlns:objectModel="clr-namespace:System.Collections.ObjectModel;assembly=System.ObjectModel"
             xmlns:settings="clr-namespace:UotanToolbox.Features.Settings"
			 xmlns:assets="clr-namespace:UotanToolbox.Assets;assembly=UotanToolbox"
             d:DesignHeight="450"
             d:DesignWidth="800"
             x:DataType="settings:SettingsViewModel"
             mc:Ignorable="d">
    <controls:SukiStackPage Margin="20">
        <controls:SukiStackPage.Content>
            <controls:SettingsLayout Name="{x:Static assets:Resources.Settings_Settings}">
                <controls:SettingsLayout.Items>
                    <objectModel:ObservableCollection x:TypeArguments="controls:SettingsLayoutItem">
                        <controls:SettingsLayoutItem Header="{x:Static assets:Resources.Settings_BaseTheme}">
                            <controls:SettingsLayoutItem.Content>
                                <StackPanel HorizontalAlignment="Center"
                                            Orientation="Horizontal"
                                            Spacing="20">
                                    <RadioButton Width="180"
                                                 Height="160"
                                                 Padding="0"
                                                 Classes="GigaChips"
                                                 GroupName="RadioBaseTheme"
                                                 IsChecked="{Binding IsLightTheme}">
                                        <Border Margin="-50"
                                                Background="#fafafa"
                                                CornerRadius="{DynamicResource MediumCornerRadius}">
                                            <Grid>
                                                <TextBlock Margin="42"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Bottom"
                                                           FontWeight="DemiBold"
                                                           Foreground="#555555"
                                                           Text="{x:Static assets:Resources.Settings_LightMode}" />
                                            </Grid>
                                        </Border>
                                    </RadioButton>

                                    <RadioButton Width="180"
                                                 Height="160"
                                                 Classes="GigaChips"
                                                 GroupName="RadioBaseTheme"
                                                 IsChecked="{Binding !IsLightTheme}">
                                        <Border Margin="-50"
                                                Background="#222222"
                                                CornerRadius="{DynamicResource MediumCornerRadius}">
                                            <Grid>
                                                <TextBlock Margin="42"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Bottom"
                                                           FontWeight="DemiBold"
                                                           Foreground="#fafafa"
                                                           Text="{x:Static assets:Resources.Settings_DarkMode}" />
                                            </Grid>
                                        </Border>
                                    </RadioButton>
                                </StackPanel>
                            </controls:SettingsLayoutItem.Content>
                        </controls:SettingsLayoutItem>

                        <controls:SettingsLayoutItem Header="{x:Static assets:Resources.Settings_Other}">
                            <controls:SettingsLayoutItem.Content>
                                <controls:GlassCard Margin="15">
                                    <DockPanel>
                                        <ToggleButton VerticalAlignment="Top"
                                                      Classes="Switch"
                                                      DockPanel.Dock="Right"
                                                      IsChecked="{Binding IsBackgroundAnimated}" />
                                        <StackPanel HorizontalAlignment="Left">
                                            <TextBlock FontSize="16"
                                                       FontWeight="DemiBold"
                                                       Text="{x:Static assets:Resources.Settings_AnimatedBackground}" />
                                            <TextBlock Margin="0,12,70,0"
                                                       Foreground="{DynamicResource SukiLowText}"
                                                       Text="{x:Static assets:Resources.Settings_EnableCloudEffect}"
                                                       TextWrapping="Wrap" />
                                        </StackPanel>
                                    </DockPanel>
                                </controls:GlassCard>
                            </controls:SettingsLayoutItem.Content>
                        </controls:SettingsLayoutItem>
                    </objectModel:ObservableCollection>
                </controls:SettingsLayout.Items>
            </controls:SettingsLayout>
        </controls:SukiStackPage.Content>
    </controls:SukiStackPage>
</UserControl>

Additional Information

No response

yuzh0816 avatar Jun 19 '24 04:06 yuzh0816