英文:
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; }
您的模型试图将字符串传递给它。因此,它不理解应该如何处理它。幸运的是,有一种很好的方法可以解决这个问题。我们可以创建一个转换器,在将值传递给属性之前可以对其进行操作。
我们必须告诉视图在哪里找到资源,所以在顶部添加以下内容:
<ContentPage.Resources>
<ResourceDictionary>
<converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
</ResourceDictionary>
</ContentPage.Resources>
我们创建一个简单的转换器,如下所示:
public class ColorHexStringToMAUIColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string hexColor = (string)value;
ColorTypeConverter converter = new ColorTypeConverter();
return (Color)converter.ConvertFromInvariantString(hexColor);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
更新
完整的ContentPage如下:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
x:Class="Randoff.Views.VARHauteDetailPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:Randoff.Converters"
Title="VAR-Haute">
<ContentPage.Resources>
<ResourceDictionary>
<converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView>
<StackLayout Margin="0">
<Label
HorizontalOptions="Center"
Style="{DynamicResource TitleStyle}"
Text="{Binding VARHaute.Name}" />
<!--
<Label Text="{Binding VARHaute.Location}"
FontAttributes="Italic"
HorizontalOptions="Center" />
-->
<Image
HeightRequest="240"
HorizontalOptions="Center"
Source="{Binding VARHaute.Image}"
WidthRequest="300" />
<Image
Aspect="AspectFill"
HeightRequest="100"
HorizontalOptions="Center"
Source="{Binding VARHaute.Profil}"
WidthRequest="200" />
<Label
HorizontalOptions="Center"
Style="{DynamicResource BodyStyle}"
Text="{Binding VARHaute.Distance, StringFormat='Distance: {0}km'}" />
<Label
HorizontalOptions="Center"
Style="{DynamicResource BodyStyle}"
Text="{Binding VARHaute.Denivele, StringFormat='Dénivelé: {0}m'}" />
<Image
BackgroundColor="red"
HeightRequest="30"
HorizontalOptions="Center"
Source="hiking.png"
WidthRequest="50" />
<Image
BackgroundColor="{Binding VARHaute.NiveauColor, Converter={StaticResource ColorHexStringToMAUIColorConverter}}"
HeightRequest="30"
HorizontalOptions="Center"
Source="hiking.png"
WidthRequest="50" />
<Button
BackgroundColor="{StaticResource Primary}"
Command="{Binding TapCommand}"
CommandParameter="{Binding VARHaute.Map}"
Text="Map"
TextColor="White"
WidthRequest="150" />
</StackLayout>
</ScrollView>
</ContentPage>
转换器在其自己的文件中:
using Microsoft.Maui.Graphics.Converters;
using System.Globalization;
namespace Randoff.Converters
{
public class ColorHexStringToMAUIColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string hexColor = (string)value;
ColorTypeConverter converter = new ColorTypeConverter();
return (Color)converter.ConvertFromInvariantString(hexColor);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
英文:
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.
<Image
BackgroundColor = "{Binding VARHaute.NiveauColor, Converter={StaticResource ColarHexStringToMAUIColorConverter}}"
HeightRequest = "30"
HorizontalOptions = "Center"
Source = "hiking.png"
WidthRequest = "50" />
We have to tell the view where to find resourses so at the top you have to add:
<ContentPage.Resources>
<ResourceDictionary>
<converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
</ResourceDictionary>
</ContentPage.Resources>
We make a simple converter like so:
public class ColorHexStringToMAUIColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string hexColor = (string)value;
ColorTypeConverter converter = new ColorTypeConverter();
return (Color)converter.ConvertFromInvariantString(hexColor);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
UPDATE
The comeplete ContentPage
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
x:Class="Randoff.Views.VARHauteDetailPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:Randoff.Converters"
Title="VAR-Haute">
<ContentPage.Resources>
<ResourceDictionary>
<converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView>
<StackLayout Margin="0">
<Label
HorizontalOptions="Center"
Style="{DynamicResource TitleStyle}"
Text="{Binding VARHaute.Name}" />
<!--<Label Text="{Binding VARHaute.Location}"
FontAttributes="Italic"
HorizontalOptions="Center" />-->
<Image
HeightRequest="240"
HorizontalOptions="Center"
Source="{Binding VARHaute.Image}"
WidthRequest="300" />
<Image
Aspect="AspectFill"
HeightRequest="100"
HorizontalOptions="Center"
Source="{Binding VARHaute.Profil}"
WidthRequest="200" />
<Label
HorizontalOptions="Center"
Style="{DynamicResource BodyStyle}"
Text="{Binding VARHaute.Distance, StringFormat='Distance: {0}km'}" />
<Label
HorizontalOptions="Center"
Style="{DynamicResource BodyStyle}"
Text="{Binding VARHaute.Denivele, StringFormat='Dénivelé: {0}m'}" />
<Image
BackgroundColor="red"
HeightRequest="30"
HorizontalOptions="Center"
Source="hiking.png"
WidthRequest="50" />
<Image
BackgroundColor="{Binding VARHaute.NiveauColor, Converter={StaticResource ColorHexStringToMAUIColorConverter}}"
HeightRequest="30"
HorizontalOptions="Center"
Source="hiking.png"
WidthRequest="50" />
<Button
BackgroundColor="{StaticResource Primary}"
Command="{Binding TapCommand}"
CommandParameter="{Binding VARHaute.Map}"
Text="Map"
TextColor="White"
WidthRequest="150" />
</StackLayout>
</ScrollView>
</ContentPage>
The converter in its own file
using Microsoft.Maui.Graphics.Converters;
using System.Globalization;
namespace Randoff.Converters;
public class ColorHexStringToMAUIColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string hexColor = (string)value;
ColorTypeConverter converter = new ColorTypeConverter();
return (Color)converter.ConvertFromInvariantString(hexColor);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论