[improve] 优化界面对齐效果

zxbmmmmmmmmm · Nov 30, 2024 · b1a1676 · b1a1676
1 parent c58aa11
commit b1a1676
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 20 deletions.
diff --git a/FluentWeather.Uwp/FluentWeather.Uwp.csproj b/FluentWeather.Uwp/FluentWeather.Uwp.csproj
@@ -457,6 +457,7 @@
     <Content Include="Assets\Square44x44Logo.scale-200.png" />
     <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
     <Content Include="Assets\Wide310x150Logo.scale-200.png" />
+    <PRIResource Include="Strings\es-ES\Resources.resw" />
     <PRIResource Include="Strings\fr-FR\Resources.resw" />
     <PRIResource Include="Strings\ja-JP\Resources.resw" />
   </ItemGroup>

diff --git a/FluentWeather.Uwp/Pages/MainPage.xaml b/FluentWeather.Uwp/Pages/MainPage.xaml
@@ -191,9 +191,14 @@
                         Margin="0,0,0,12"
                         x:DefaultBindMode="OneWay">
                         <StackPanel>
-                            <StackPanel Opacity="0.95" Orientation="Horizontal">
+                            <Grid ColumnSpacing="8" Opacity="0.95">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
                                 <TextBlock
                                     x:Name="TemperatureText"
+                                    Height="{StaticResource TemperatureTextHeight}"
                                     Style="{ThemeResource TemperatureTextStyle}"
                                     Text="{x:Bind converters1:ConverterMethods.ConvertTemperatureUnit(ViewModel.WeatherNow.Temperature, x:False)}">
                                     <i:Interaction.Behaviors>
@@ -202,19 +207,18 @@
                                         </core:EventTriggerBehavior>
                                     </i:Interaction.Behaviors>
                                 </TextBlock>
-
-                                <Grid Margin="4,26,0,0">
-                                    <TextBlock
-                                        Margin="2,-16,0,0"
-                                        Style="{ThemeResource TemperatureUnitTextStyle}"
-                                        Text="°" />
-                                    <TextBlock
-                                        VerticalAlignment="Bottom"
-                                        Style="{StaticResource WeatherNowDescriptionTextStyle}"
-                                        Text="{x:Bind ViewModel.WeatherNow.Description}" />
-                                </Grid>
-                            </StackPanel>
-                            <StackPanel Margin="0,-8,0,0" Orientation="Horizontal">
+                                <TextBlock
+                                    Grid.Column="1"
+                                    Margin="0,8,0,0"
+                                    Style="{ThemeResource TemperatureUnitTextStyle}"
+                                    Text="°" />
+                                <TextBlock
+                                    Grid.Column="1"
+                                    VerticalAlignment="Bottom"
+                                    Style="{StaticResource WeatherNowDescriptionTextStyle}"
+                                    Text="{x:Bind ViewModel.WeatherNow.Description}" />
+                            </Grid>
+                            <StackPanel Margin="0,0,0,0" Orientation="Horizontal">
                                 <TextBlock
                                     VerticalAlignment="Center"
                                     FontSize="18"
@@ -232,8 +236,9 @@
                                             Width="8"
                                             Height="8"
                                             Margin="0,2,4,0"
-                                            Visibility="{x:Bind ViewModel.AirCondition.AqiLevel,Converter={StaticResource NullToVisibilityConverter}}"
-                                            Fill="{x:Bind converters1:ConverterMethods.AqiLevelToColor(ViewModel.AirCondition.AqiLevel)}" Opacity="0.8"/>
+                                            Fill="{x:Bind converters1:ConverterMethods.AqiLevelToColor(ViewModel.AirCondition.AqiLevel)}"
+                                            Opacity="0.8"
+                                            Visibility="{x:Bind ViewModel.AirCondition.AqiLevel, Converter={StaticResource NullToVisibilityConverter}}" />
                                         <TextBlock FontSize="17" Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}">
                                             <Run x:Uid="AirCondition" />
                                             <Run Text="-" />
@@ -403,6 +408,7 @@
                             Margin="0,0,0,0"
                             HorizontalAlignment="Stretch"
                             HorizontalContentAlignment="Stretch"
+                            VerticalContentAlignment="{StaticResource DailyWeatherItemVerticalContentAlignment}"
                             DesiredWidth="120"
                             IsItemClickEnabled="True"
                             ItemHeight="190"

diff --git a/FluentWeather.Uwp/Themes/ClassicThemeStyles.xaml b/FluentWeather.Uwp/Themes/ClassicThemeStyles.xaml
@@ -43,6 +43,7 @@
     <FontFamily x:Key="SymbolThemeFontFamily">Segoe MDL2 Assets</FontFamily>
 
     <x:Double x:Key="WeatherDescriptionFontSize">22</x:Double>
+    <x:Double x:Key="TemperatureTextHeight">160</x:Double>
 
     <!--  Override system generated accent colors  -->
     <Color x:Key="SystemAccentColorLight1">#FF1D85D7</Color>

diff --git a/FluentWeather.Uwp/Themes/Generic.xaml b/FluentWeather.Uwp/Themes/Generic.xaml
@@ -58,6 +58,7 @@
     <x:Double x:Key="ContentDialogMaxWidth">548</x:Double>
     <x:Double x:Key="ContentDialogMinHeight">184</x:Double>
     <x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
+    <x:Double x:Key="TemperatureTextHeight">102</x:Double>
 
     <GridLength x:Key="ContentDialogButtonSpacing">8</GridLength>
     <Thickness x:Key="ContentDialogTitleMargin">0,0,0,12</Thickness>
@@ -82,7 +83,6 @@
         TargetType="TextBlock">
         <Setter Property="FontSize" Value="32" />
         <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="Margin" Value="0,0,0,20" />
     </Style>
     <Style
         x:Key="GridViewItemStyle"
@@ -1003,8 +1003,8 @@
 
     <DataTemplate x:Key="WeatherForecastTemplate" x:DataType="models:WeatherDailyBase">
         <UserControl>
-            <StackPanel VerticalAlignment="Center" Spacing="4">
-                <TextBlock
+            <StackPanel Spacing="4">
+                <TextBlock Margin="0,4,0,0"
                     HorizontalAlignment="Center"
                     FontSize="17"
                     Text="{x:Bind Time, Converter={StaticResource DateConverter}}" />

diff --git a/FluentWeather.Uwp/Themes/Generic.xaml.cs b/FluentWeather.Uwp/Themes/Generic.xaml.cs
@@ -9,9 +9,11 @@ public Generic()
     {
         this.InitializeComponent();
         var isEnglish = CultureInfo.CurrentCulture.Name.Contains("en")
-            || CultureInfo.CurrentCulture.Name.Contains("fr");
+                        || CultureInfo.CurrentCulture.Name.Contains("fr") 
+                        || CultureInfo.CurrentCulture.Name.Contains("es");
         this.Add("WeatherDescriptionFontSize", isEnglish ? 16 : 18);
         this.Add("HourlyWeatherDescriptionVisibility", isEnglish ? Visibility.Collapsed : Visibility.Visible);
+        this.Add("DailyWeatherItemVerticalContentAlignment", isEnglish ? VerticalAlignment.Center : VerticalAlignment.Top);
     }
     public static Visibility GetPrecipVisibility(int? precip)
     {