BackgroundColor="{Binding …." 不起作用

huangapple
go评论132阅读模式
英文:

BackgroundColor="{Binding ...." does not work

问题

BackgroundColor="{Binding VARHaute.NiveauColor}" --> 图像消失，没有颜色

英文:

BackgroundColor="{Binding [item from 'Models']" does not work

based on sample: 'Shell Mixed Navigation'

when using:
BackgroundColor="red" or "#f2a82f" --> it works

when using:
BackgroundColor="{Binding VARHaute.NiveauColor}" --> Image disappears, no color

In 'Models' :
NiveauColor = "#f2a82f", other items in 'Models' work correctly !)

PS, see github: https://github.com/edikaufmann/RandoGIT
'VARHauteDetailPage.xaml'

? what in the world I'm not seeing ?

答案1

得分: 0

如果您查看BackgroundColor属性，您会看到它接受一个Color参数。

public Color BackgroundColor { get; set; }

您的模型试图将字符串传递给它。因此，它不理解应该如何处理它。幸运的是，有一种很好的方法可以解决这个问题。我们可以创建一个转换器，在将值传递给属性之前可以对其进行操作。

我们必须告诉视图在哪里找到资源，所以在顶部添加以下内容：

  1. <ContentPage.Resources>
  2.     <ResourceDictionary>
  3.         <converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
  4.     </ResourceDictionary>
  5. </ContentPage.Resources>

我们创建一个简单的转换器，如下所示：

  1. public class ColorHexStringToMAUIColorConverter : IValueConverter
  2. {
  3.     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.     {
  5.         string hexColor = (string)value;
  6.         ColorTypeConverter converter = new ColorTypeConverter();
  8.         return (Color)converter.ConvertFromInvariantString(hexColor);
  9.     }
  11.     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  12.     {
  13.         throw new NotImplementedException();
  14.     }
  15. }

更新

完整的ContentPage如下：

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <ContentPage
  3.     x:Class="Randoff.Views.VARHauteDetailPage"
  4.     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  5.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  6.     xmlns:converters="clr-namespace:Randoff.Converters"
  7.     Title="VAR-Haute">
  9.     <ContentPage.Resources>
  10.         <ResourceDictionary>
  11.             <converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
  12.         </ResourceDictionary>
  13.     </ContentPage.Resources>
  15.     <ScrollView>
  16.         <StackLayout Margin="0">
  17.             <Label
  18.                 HorizontalOptions="Center"
  19.                 Style="{DynamicResource TitleStyle}"
  20.                 Text="{Binding VARHaute.Name}" />
  21.             <!--
  22.             <Label Text="{Binding VARHaute.Location}"
  23.                    FontAttributes="Italic"
  24.                    HorizontalOptions="Center" />
  25.             -->
  26.             <Image
  27.                 HeightRequest="240"
  28.                 HorizontalOptions="Center"
  29.                 Source="{Binding VARHaute.Image}"
  30.                 WidthRequest="300" />
  31.             <Image
  32.                 Aspect="AspectFill"
  33.                 HeightRequest="100"
  34.                 HorizontalOptions="Center"
  35.                 Source="{Binding VARHaute.Profil}"
  36.                 WidthRequest="200" />
  37.             <Label
  38.                 HorizontalOptions="Center"
  39.                 Style="{DynamicResource BodyStyle}"
  40.                 Text="{Binding VARHaute.Distance, StringFormat='Distance: {0}km'}" />
  41.             <Label
  42.                 HorizontalOptions="Center"
  43.                 Style="{DynamicResource BodyStyle}"
  44.                 Text="{Binding VARHaute.Denivele, StringFormat='Dénivelé: {0}m'}" />
  45.             <Image
  46.                 BackgroundColor="red"
  47.                 HeightRequest="30"
  48.                 HorizontalOptions="Center"
  49.                 Source="hiking.png"
  50.                 WidthRequest="50" />
  51.             <Image
  52.                 BackgroundColor="{Binding VARHaute.NiveauColor, Converter={StaticResource ColorHexStringToMAUIColorConverter}}"
  53.                 HeightRequest="30"
  54.                 HorizontalOptions="Center"
  55.                 Source="hiking.png"
  56.                 WidthRequest="50" />
  58.             <Button
  59.                 BackgroundColor="{StaticResource Primary}"
  60.                 Command="{Binding TapCommand}"
  61.                 CommandParameter="{Binding VARHaute.Map}"
  62.                 Text="Map"
  63.                 TextColor="White"
  64.                 WidthRequest="150" />
  65.         </StackLayout>
  67.     </ScrollView>
  68. </ContentPage>

转换器在其自己的文件中：

  1. using Microsoft.Maui.Graphics.Converters;
  2. using System.Globalization;
  4. namespace Randoff.Converters
  5. {
  6.     public class ColorHexStringToMAUIColorConverter : IValueConverter
  7.     {
  8.         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  9.         {
  10.             string hexColor = (string)value;
  11.             ColorTypeConverter converter = new ColorTypeConverter();
  13.             return (Color)converter.ConvertFromInvariantString(hexColor);
  14.         }
  16.         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  17.         {
  18.             throw new NotImplementedException();
  19.         }
  20.     }
  21. }
英文:

If you look at the property of BackgroundColor you will see that it takes a Color parameter.

public Color BackgroundColor { get; set; }

Your model is trying to feed it a string. So it doesn't understand what it should do with that. Fortunate there is a good way to go about this. We can make a converter where you can manipulate the value before it goes into the property.

  1. &lt;Image
  2.     BackgroundColor = &quot;{Binding VARHaute.NiveauColor, Converter={StaticResource ColarHexStringToMAUIColorConverter}}&quot;
  3.     HeightRequest = &quot;30&quot;
  4.     HorizontalOptions = &quot;Center&quot;
  5.     Source = &quot;hiking.png&quot;
  6.     WidthRequest = &quot;50&quot; /&gt;

We have to tell the view where to find resourses so at the top you have to add:

  1. &lt;ContentPage.Resources&gt;
  2.     &lt;ResourceDictionary&gt;
  3.         &lt;converters:ColorHexStringToMAUIColorConverter x:Key=&quot;ColorHexStringToMAUIColorConverter&quot; /&gt;
  4.     &lt;/ResourceDictionary&gt;
  5. &lt;/ContentPage.Resources&gt;

We make a simple converter like so:

  1. public class ColorHexStringToMAUIColorConverter : IValueConverter
  2. {
  3.     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.     {
  5.         string hexColor = (string)value;
  6.         ColorTypeConverter converter = new ColorTypeConverter();
  8.         return (Color)converter.ConvertFromInvariantString(hexColor);
  9.     }
  11.     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  12.     {
  13.         throw new NotImplementedException();
  14.     }
  15. }

UPDATE

The comeplete ContentPage

  1. &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
  2. &lt;ContentPage
  3.     x:Class=&quot;Randoff.Views.VARHauteDetailPage&quot;
  4.     xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
  5.     xmlns:x=&quot;http://schemas.microsoft.com/winfx/2009/xaml&quot;
  6.     xmlns:converters=&quot;clr-namespace:Randoff.Converters&quot;
  7.     Title=&quot;VAR-Haute&quot;&gt;
  9.     &lt;ContentPage.Resources&gt;
  10.         &lt;ResourceDictionary&gt;
  11.             &lt;converters:ColorHexStringToMAUIColorConverter x:Key=&quot;ColorHexStringToMAUIColorConverter&quot; /&gt;
  12.         &lt;/ResourceDictionary&gt;
  13.     &lt;/ContentPage.Resources&gt;
  15.     &lt;ScrollView&gt;
  16.         &lt;StackLayout Margin=&quot;0&quot;&gt;
  17.             &lt;Label
  18.                 HorizontalOptions=&quot;Center&quot;
  19.                 Style=&quot;{DynamicResource TitleStyle}&quot;
  20.                 Text=&quot;{Binding VARHaute.Name}&quot; /&gt;
  21.             &lt;!--&lt;Label Text=&quot;{Binding VARHaute.Location}&quot;
  22.                    FontAttributes=&quot;Italic&quot;
  23.                    HorizontalOptions=&quot;Center&quot; /&gt;--&gt;
  24.             &lt;Image
  25.                 HeightRequest=&quot;240&quot;
  26.                 HorizontalOptions=&quot;Center&quot;
  27.                 Source=&quot;{Binding VARHaute.Image}&quot;
  28.                 WidthRequest=&quot;300&quot; /&gt;
  29.             &lt;Image
  30.                 Aspect=&quot;AspectFill&quot;
  31.                 HeightRequest=&quot;100&quot;
  32.                 HorizontalOptions=&quot;Center&quot;
  33.                 Source=&quot;{Binding VARHaute.Profil}&quot;
  34.                 WidthRequest=&quot;200&quot; /&gt;
  35.             &lt;Label
  36.                 HorizontalOptions=&quot;Center&quot;
  37.                 Style=&quot;{DynamicResource BodyStyle}&quot;
  38.                 Text=&quot;{Binding VARHaute.Distance, StringFormat=&#39;Distance: {0}km&#39;}&quot; /&gt;
  39.             &lt;Label
  40.                 HorizontalOptions=&quot;Center&quot;
  41.                 Style=&quot;{DynamicResource BodyStyle}&quot;
  42.                 Text=&quot;{Binding VARHaute.Denivele, StringFormat=&#39;D&#233;nivel&#233;: {0}m&#39;}&quot; /&gt;
  43.             &lt;Image
  44.                 BackgroundColor=&quot;red&quot;
  45.                 HeightRequest=&quot;30&quot;
  46.                 HorizontalOptions=&quot;Center&quot;
  47.                 Source=&quot;hiking.png&quot;
  48.                 WidthRequest=&quot;50&quot; /&gt;
  49.             &lt;Image
  50.                 BackgroundColor=&quot;{Binding VARHaute.NiveauColor, Converter={StaticResource ColorHexStringToMAUIColorConverter}}&quot;
  51.                 HeightRequest=&quot;30&quot;
  52.                 HorizontalOptions=&quot;Center&quot;
  53.                 Source=&quot;hiking.png&quot;
  54.                 WidthRequest=&quot;50&quot; /&gt;
  56.             &lt;Button
  57.                 BackgroundColor=&quot;{StaticResource Primary}&quot;
  58.                 Command=&quot;{Binding TapCommand}&quot;
  59.                 CommandParameter=&quot;{Binding VARHaute.Map}&quot;
  60.                 Text=&quot;Map&quot;
  61.                 TextColor=&quot;White&quot;
  62.                 WidthRequest=&quot;150&quot; /&gt;
  63.         &lt;/StackLayout&gt;
  65.     &lt;/ScrollView&gt;
  66. &lt;/ContentPage&gt;

The converter in its own file

  1. using Microsoft.Maui.Graphics.Converters;
  2. using System.Globalization;
  4. namespace Randoff.Converters;
  6. public class ColorHexStringToMAUIColorConverter : IValueConverter
  7. {
  8.     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  9.     {
  10.         string hexColor = (string)value;
  11.         ColorTypeConverter converter = new ColorTypeConverter();
  13.         return (Color)converter.ConvertFromInvariantString(hexColor);
  14.     }
  16.     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  17.     {
  18.         throw new NotImplementedException();
  19.     }
  20. }

huangapple
  • 本文由 发表于 2023年8月5日 14:19:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76840386.html
  • maui
  • visual-studio
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定