Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I can't bind the color in Shade to my selected item #10

Closed
AlonRom opened this issue Jul 9, 2020 · 49 comments
Closed

I can't bind the color in Shade to my selected item #10

AlonRom opened this issue Jul 9, 2020 · 49 comments

Comments

@AlonRom
Copy link

AlonRom commented Jul 9, 2020

Hi,

for example, this doesn't work:

<sh:Shade BlurRadius="10"
Opacity="0.5"
Offset="10,10"
Color="{Binding Color}" />

am I'm doing something wrong?

thanks

@roubachof
Copy link
Owner

roubachof commented Jul 9, 2020

ohoh, I maybe eer, maybe forgot to pass the Shadows BindingContext to its Shades.
whoopsie.
Could you try the following and see if it works ?

<sh:Shade BlurRadius="10"
     BindingContext="{Binding YourModel}"
     Opacity="0.5"
     Offset="10,10"
     Color="{Binding Color}" />

Will fix this silly mistake quickly

@roubachof
Copy link
Owner

or you could do:

<sh:Shade BlurRadius="10"
     Opacity="0.5"
     Offset="10,10"
     Color="{Binding Source={RelativeSource AncestorType={x:Type local:YourModel}}, Path=Color}" />

It's just a workaround till waiting for the fix

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

@roubachof thanks, this - local:YourModel is my ViewModel?

@roubachof
Copy link
Owner

in the example with RelativeSource, it is your ViewModel type yes.

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

so it doesn't work, this is a selected item in a list.

@roubachof
Copy link
Owner

what is the name of your item ViewModel, and show me your xaml

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

Sure :)


<?xml version="1.0" encoding="UTF-8" ?>
<views:ViewContentBase
    x:Class="PetActivityMobile.Core.Views.DeviceSetup.DeviceLocate.DeviceLocateSetupLedColorView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
    xmlns:customControls="clr-namespace:PetActivityMobile.Core.CustomControls;assembly=PetActivityMobile.Core"
    xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
    xmlns:local="clr-namespace:PetActivityMobile.Core.ViewModels.DeviceSetup.DeviceLocate;assembly=PetActivityMobile.Core"
    xmlns:scrControls="clr-namespace:PetActivityMobile.Core.CustomControls.ScrControls;assembly=PetActivityMobile.Core"
    xmlns:services="clr-namespace:Infra.Core.Services;assembly=Infra.Core"
    xmlns:sfList="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
    xmlns:shades="clr-namespace:Sharpnado.Shades;assembly=Sharpnado.Shadows"
    xmlns:views="clr-namespace:PetActivityMobile.Core.Views.Base;assembly=PetActivityMobile.Core"
    Title="{Binding TextSource[Led]}"
    services:IOC.AutoWireViewModel="true"
    ShowMenuButton="false"
    ShowNavigateBar="true">
    <views:ViewContentBase.Resources>
        <ResourceDictionary>

            <!--  SelectedLedColorItemTemplate  -->
            <DataTemplate x:Key="SelectedLedColorItemTemplate">
                <shades:Shadows
                    Margin="0,2,0,0"
                    BackgroundColor="White"
                    CornerRadius="40"
                    HeightRequest="70"
                    HorizontalOptions="Center"
                    WidthRequest="70">
                    <shades:Shadows.Shades>
                        <shades:ImmutableShades>
                            <shades:Shade
                                BlurRadius="10"
                                Opacity="0.3"
                                Offset="5,5"
                                Color="{Binding Source={RelativeSource AncestorType={x:Type local:DeviceLocateSetupLedColorViewModel}}, Path=SelectedLed.Color}" />
                            <shades:Shade
                                BindingContext="{Binding}"
                                BlurRadius="10"
                                Opacity="0.3"
                                Offset="-5,-5"
                                Color="{Binding Source={RelativeSource AncestorType={x:Type local:DeviceLocateSetupLedColorViewModel}}, Path=SelectedLed.Color}" />
                            <shades:Shade
                                BindingContext="{Binding}"
                                BlurRadius="10"
                                Opacity="0.3"
                                Offset="-5,5"
                                Color="{Binding Color}" />
                            <shades:Shade
                                BindingContext="{Binding}"
                                BlurRadius="10"
                                Opacity="0.3"
                                Offset="5,-5"
                                Color="{Binding Color}" />
                        </shades:ImmutableShades>
                    </shades:Shadows.Shades>
                    <border:SfBorder
                        BorderColor="{StaticResource FiordColor}"
                        BorderWidth="3"
                        CornerRadius="25"
                        HeightRequest="50"
                        HorizontalOptions="Center"
                        ShadowColor="{StaticResource ShadowGrayColor}"
                        VerticalOptions="Center"
                        WidthRequest="50">

                        <gradient:SfGradientView BackgroundBrush="{Binding BackgroundGradient}" />
                    </border:SfBorder>
                </shades:Shadows>
            </DataTemplate>

            <!--  LedColorItemTemplate  -->
            <DataTemplate x:Key="LedColorItemTemplate">
                <ContentView HeightRequest="70" WidthRequest="70">
                    <border:SfBorder
                        BorderColor="{StaticResource EntryBackgoundLite}"
                        BorderWidth="2"
                        CornerRadius="25"
                        HeightRequest="50"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        WidthRequest="50">
                        <gradient:SfGradientView BackgroundBrush="{Binding BackgroundGradient}" />
                    </border:SfBorder>
                </ContentView>
            </DataTemplate>
        </ResourceDictionary>
    </views:ViewContentBase.Resources>


    <StackLayout Margin="24">

        <scrControls:ScrLabel
            Margin="40,0"
            CustomFontFamily="SourceSansPro-Regular"
            FontSize="16"
            HorizontalOptions="CenterAndExpand"
            HorizontalTextAlignment="Center"
            Text="{Binding TextSource[Led_Explanation]}"
            TextColor="{StaticResource LableTextColor}"
            VerticalOptions="Start"
            VerticalTextAlignment="Center" />

        <Image
            Margin="0,30,0,0"
            Aspect="AspectFit"
            HorizontalOptions="FillAndExpand"
            Source="{customControls:ImageMultiResource PetActivityMobile.Core.Resources.locate-led-render}"
            VerticalOptions="CenterAndExpand" />

        <sfList:SfListView
            Margin="0"
            AutoFitMode="Height"
            HorizontalOptions="CenterAndExpand"
            IsScrollBarVisible="False"
            IsScrollingEnabled="False"
            ItemSize="70"
            ItemTemplate="{StaticResource LedColorItemTemplate}"
            ItemsSource="{Binding LedsColorList}"
            SelectedItem="{Binding SelectedLed}"
            SelectedItemTemplate="{StaticResource SelectedLedColorItemTemplate}"
            SelectionMode="Single"
            VerticalOptions="StartAndExpand">
            <sfList:SfListView.LayoutManager>
                <sfList:GridLayout SpanCount="4" />
            </sfList:SfListView.LayoutManager>
        </sfList:SfListView>
    </StackLayout>
</views:ViewContentBase>



@roubachof
Copy link
Owner

the type here:

AncestorType={x:Type local:DeviceLocateSetupLedColorViewModel}

should be your view model item type, not your parent view model. The one in your LedsColorList.

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

tried both of these and still nothing :/

   <shades:Shade
                    BlurRadius="10"
                                Opacity="0.3"
                                Offset="5,5"
                                Color="{Binding Source={RelativeSource AncestorType={x:Type local:SelectedLed}}, Path=Color}" />
                            <shades:Shade
                                BindingContext="{Binding}"
                                BlurRadius="10"
                                Opacity="0.3"
                                Offset="-5,-5"
                                Color="{Binding Source={RelativeSource AncestorType={x:Type local:LedsColorList}}, Path=SelectedLed.Color}"            

@roubachof
Copy link
Owner

lol no... not these one.
Ok then show me your DeviceLocateSetupLedColorViewModel.

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

Sure:

` public class DeviceLocateSetupLedColorViewModel : ViewModelBase
{
public DeviceLocateSetupLedColorViewModel()
{
InitializeLedColorList();
}

    private LedColorModel _selecteLed;
    public LedColorModel SelectedLed
    {
        get => _selecteLed;
        set => SetProperty(ref _selecteLed, value);
    }

    private ObservableCollection<LedColorModel> _ledsColorList;

    public ObservableCollection<LedColorModel> LedsColorList
    {
        get => _ledsColorList;
        set => SetProperty(ref _ledsColorList, value);
    }

    public ICommand ContinueCommand =>
      new AsyncCommand(async () =>
      {
          await OnContinue();
      }, null);

    public override Task InitializeAsync(object navigationData)
    {
        return base.InitializeAsync(navigationData);
    }

    private void InitializeLedColorList()
    {
        LedsColorList = new ObservableCollection<LedColorModel>
        {
           new LedColorModel
           {
               Color = Color.FromHex(Colors.GhostWhite),
               BackgroundGradient = AddLinearGradient(Colors.SolideWhite, Colors.GhostWhite)
           },
    }

    private SfLinearGradientBrush AddLinearGradient(string color1, string color2)
    {
        SfLinearGradientBrush gradient = new SfLinearGradientBrush();

        gradient.StartPoint = new Point(0, 0);
        gradient.EndPoint = new Point(1, 1);

        gradient.GradientStops.Add(new SfGradientStop() { Color = Color.FromHex(color1), Offset = 0 });
        gradient.GradientStops.Add(new SfGradientStop() { Color = Color.FromHex(color1), Offset = 0.5 });
        gradient.GradientStops.Add(new SfGradientStop() { Color = Color.FromHex(color2), Offset = 0.5 });
        gradient.GradientStops.Add(new SfGradientStop() { Color = Color.FromHex(color2), Offset = 1 });
        return gradient;
    }

    private async Task OnContinue()
    {
    }
}

public class LedColorModel : ExtendedBindableObject
{
public SfLinearGradientBrush BackgroundGradient { get; set; }
//public Color Color { get; set; }

    private Color _color;
    public Color Color
    {
        get => _color;
        set => SetProperty(ref _color, value);
    }
}

`

@roubachof
Copy link
Owner

ok then it's:

Color="{Binding Source={RelativeSource AncestorType={x:Type local:LedColorModel}}, Path=Color}"

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

still no:/ + there is a Xaml error

@roubachof
Copy link
Owner

Ok then it means we got the syntax wrong, juste give me a repro sample please.

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

ok.
Xaml:

<views:ViewContentBase
x:Class="PetActivityMobile.Core.Views.DeviceSetup.DeviceLocate.DeviceLocateSetupLedColorView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
xmlns:customControls="clr-namespace:PetActivityMobile.Core.CustomControls;assembly=PetActivityMobile.Core"
xmlns:gradient="clr-namespace:Syncfusion.XForms.Graphics;assembly=Syncfusion.Core.XForms"
xmlns:local="clr-namespace:PetActivityMobile.Core.Models.Device.DeviceLocate;assembly=PetActivityMobile.Core"
xmlns:scrControls="clr-namespace:PetActivityMobile.Core.CustomControls.ScrControls;assembly=PetActivityMobile.Core"
xmlns:services="clr-namespace:Infra.Core.Services;assembly=Infra.Core"
xmlns:sfList="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:shades="clr-namespace:Sharpnado.Shades;assembly=Sharpnado.Shadows"
xmlns:views="clr-namespace:PetActivityMobile.Core.Views.Base;assembly=PetActivityMobile.Core"
Title="{Binding TextSource[Led]}"
services:IOC.AutoWireViewModel="true"
ShowMenuButton="false"
ShowNavigateBar="true">
views:ViewContentBase.Resources



<shades:Shadows
Margin="0,2,0,0"
BackgroundColor="White"
CornerRadius="40"
HorizontalOptions="Center">
shades:Shadows.Shades
shades:ImmutableShades
<shades:Shade
BlurRadius="10"
Opacity="0.3"
Offset="5,5"
Color="{Binding Source={RelativeSource AncestorType={x:Type local:LedColorModel}}, Path=Color}" />
<shades:Shade
BlurRadius="10"
Opacity="0.3"
Offset="-5,-5"
Color="{Binding Source={RelativeSource AncestorType={x:Type local:LedColorModel}}, Path=Color}" />
<shades:Shade
BlurRadius="10"
Opacity="0.3"
Offset="-5,5"
Color="{Binding Source={RelativeSource AncestorType={x:Type local:LedColorModel}}, Path=Color}" />
<shades:Shade
BlurRadius="10"
Opacity="0.3"
Offset="5,-5"
Color="{Binding Source={RelativeSource AncestorType={x:Type local:LedColorModel}}, Path=Color}" />
</shades:ImmutableShades>
</shades:Shadows.Shades>
<border:SfBorder
BorderColor="{StaticResource FiordColor}"
BorderWidth="3"
CornerRadius="25"
HeightRequest="50"
HorizontalOptions="Center"
ShadowColor="{StaticResource ShadowGrayColor}"
VerticalOptions="Center"
WidthRequest="50">

                    <gradient:SfGradientView BackgroundBrush="{Binding BackgroundGradient}" />
                </border:SfBorder>
            </shades:Shadows>
        </DataTemplate>

        <!--  LedColorItemTemplate  -->
        <DataTemplate x:Key="LedColorItemTemplate">
            <ContentView>
                <border:SfBorder
                    BorderColor="{StaticResource EntryBackgoundLite}"
                    BorderWidth="2"
                    CornerRadius="25"
                    HeightRequest="50"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="50">
                    <gradient:SfGradientView BackgroundBrush="{Binding BackgroundGradient}" />
                </border:SfBorder>
            </ContentView>
        </DataTemplate>
    </ResourceDictionary>
</views:ViewContentBase.Resources>


<StackLayout Margin="24" Spacing="0">

    <scrControls:ScrLabel
        Margin="20,0"
        CustomFontFamily="SourceSansPro-Regular"
        FontSize="16"
        HorizontalOptions="CenterAndExpand"
        HorizontalTextAlignment="Center"
        Text="{Binding TextSource[Led_Explanation]}"
        TextColor="{StaticResource LableTextColor}"
        VerticalOptions="Start"
        VerticalTextAlignment="Center" />

    <Image
        Margin="0,30,0,0"
        Aspect="AspectFit"
        HorizontalOptions="FillAndExpand"
        Source="{customControls:ImageMultiResource PetActivityMobile.Core.Resources.locate-led-render}"
        VerticalOptions="CenterAndExpand" />

    <sfList:SfListView
        HorizontalOptions="CenterAndExpand"
        IsScrollBarVisible="False"
        IsScrollingEnabled="False"
        ItemSize="75"
        ItemTemplate="{StaticResource LedColorItemTemplate}"
        ItemsSource="{Binding LedsColorList}"
        SelectedItem="{Binding SelectedLed}"
        SelectedItemTemplate="{StaticResource SelectedLedColorItemTemplate}"
        SelectionMode="Single"
        VerticalOptions="StartAndExpand">
        <sfList:SfListView.LayoutManager>
            <sfList:GridLayout SpanCount="4" />
        </sfList:SfListView.LayoutManager>
    </sfList:SfListView>

    <scrControls:ScrButton
        Margin="0,0,0,27"
        Command="{Binding NextCommand}"
        Style="{StaticResource ContinueButtonStyle}"
        Text="{Binding TextSource[General_Continue]}"
        VerticalOptions="End" />
</StackLayout>

</views:ViewContentBase>

@roubachof
Copy link
Owner

man this is not a repro sample, this is code. I need your whole solution zipped or shared on github.

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

sorry, this is not an option. this a production app.
is there something else that can help you help me?

@roubachof
Copy link
Owner

stay tuned, I will try something :)

@AlonRom
Copy link
Author

AlonRom commented Jul 9, 2020

thanks so much, biting my nails with anticipation.

@AlonRom
Copy link
Author

AlonRom commented Jul 10, 2020

Hi, do you have a workaround in the meantime? I really want to use this package.

@roubachof
Copy link
Owner

Hey, I'm currently fixing the issue, and I will release the package next week.
As soon as I fixed it in the code I will make a beta package for you, to see if it fixes your issue (should be today).

@AlonRom
Copy link
Author

AlonRom commented Jul 11, 2020

You are the best man!

@AlonRom
Copy link
Author

AlonRom commented Jul 11, 2020

thanks, how can I test it?

@themronion
Copy link
Contributor

themronion commented Jul 11, 2020

thanks, how can I test it?

Either uninstall nuget and add the source files to your projects or wait for a new release

@AlonRom
Copy link
Author

AlonRom commented Jul 12, 2020

I prefer to use your official release, do you think that will be soon?

@themronion
Copy link
Contributor

Well, @roubachof promised next week. So hold on)

@roubachof
Copy link
Owner

roubachof commented Jul 12, 2020

Please test the attached package (@themronion you can also test to see if your pr was correctly merged)

Sharpnado.Shadows.1.1.0.nupkg.zip

@AlonRom
Copy link
Author

AlonRom commented Jul 12, 2020

Please test the attached package (@themronion you can also test to see if your pr was correctly merged)

Sharpnado.Shadows.1.1.0.nupkg.zip

Thanks, I've got a crash when I click on one of the items in the list:
"System.ObjectDisposedException: 'Cannot access a disposed object.
Object name: 'Sharpnado.Shades.Droid.ShadowView'.'"

@roubachof
Copy link
Owner

Could I have the full stack trace please ?

@AlonRom AlonRom closed this as completed Jul 13, 2020
@AlonRom
Copy link
Author

AlonRom commented Jul 13, 2020

Could I have the full stack trace please ?

@AlonRom AlonRom reopened this Jul 13, 2020
@AlonRom
Copy link
Author

AlonRom commented Jul 13, 2020

Could I have the full stack trace please ?

Here is a link to a Sample Project: https://github.com/AlonRom/Sample.git
Once you click on the selected item it's crashing.
I have tested it on Galaxy S7 (herolte) (SM-G930F)

@roubachof
Copy link
Owner

Thanks for the feedback it helped a lot !

@AlonRom
Copy link
Author

AlonRom commented Jul 14, 2020

Thanks for the feedback it helped a lot !

Sure :) will you release soon?

@roubachof
Copy link
Owner

new attempt.
Sharpnado.Shadows.1.1.0.nupkg.zip

@AlonRom
Copy link
Author

AlonRom commented Jul 14, 2020

new attempt.
Sharpnado.Shadows.1.1.0.nupkg.zip

sorry, still the same crash

@roubachof
Copy link
Owner

you need to clear your nuget cache before testing it, cause it has the same version as the previous one

@AlonRom
Copy link
Author

AlonRom commented Jul 14, 2020

you need to clear your nuget cache before testing it, cause it has the same version as the previous one

can you release it, please?

@roubachof
Copy link
Owner

roubachof commented Jul 14, 2020

It won't change a thing for you if I release it, you still have a previous nuget package in your nuget cache. If you don't clear your local cache, it will not update the package.

@AlonRom
Copy link
Author

AlonRom commented Jul 14, 2020

It won't change a thing for you if I release it, you still have a previous nuget package in your nuget cache. If you don't clear your local cache, it will not update the package.

not sure what you mean, I don't clean my cache when I update a nuget version.

@roubachof
Copy link
Owner

But you are not updating a nuget version in this case since this is the same version.
Anyway it's super easy, just delete this folder.

image

@AlonRom
Copy link
Author

AlonRom commented Jul 14, 2020

But you are not updating a nuget version in this case since this is the same version.
Anyway it's super easy, just delete this folder.

image

I deleted, but I'm still getting error about 1.0.2:

Install-Package : NU1102: Unable to find package Sharpnado.Shadows with version (>= 1.1.0)

  • Found 3 version(s) in nuget-group [ Nearest version: 1.0.2 ]
    At line:1 char:1
  • Install-Package C:....p\Sharpnado.Shadows.1.1.0.nu ...
  •   + CategoryInfo          : NotSpecified: (:) [Install-Package], Exception
      + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PackageManagement.PowerShellCmdlets.InstallPackageCommand
    
    

Install-Package : Package restore failed. Rolling back package changes for 'PetActivityMobile.Droid'.
At line:1 char:1

  • Install-Package C:....harpnado.Shadows.1.1.0.nu ...
  •   + CategoryInfo          : NotSpecified: (:) [Install-Package], Exception
      + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PackageManagement.PowerShellCmdlets.InstallPackageCommand
    
    

@roubachof
Copy link
Owner

Put the unzipped package in a folder and add this folder as a local nuget storage.

@AlonRom
Copy link
Author

AlonRom commented Jul 14, 2020

Put the unzipped package in a folder and add this folder as a local nuget storage.

cool, from the initial test looks great :) waiting for the official release.
appreciate the efforts!

@AlonRom
Copy link
Author

AlonRom commented Jul 18, 2020

@roubachof Hi, when will you publish the new package?

@Healios
Copy link

Healios commented Jul 22, 2020

Just wanted to mention that I am also interested in the next version.

@roubachof
Copy link
Owner

Sharpnado.Shadows 1.1.0 has been released \o/

@PrajeetShrestha
Copy link

PrajeetShrestha commented Oct 3, 2021

Hi I am on version 1.2.0, and still this issue persists.

Error XFC0009: No property, BindableProperty, or event found for "Color", or mismatching type between value and property. (XFC0009)

     <sh:Shadows Shades="{sh:SingleShade Offset='0,0',
                                    Opacity=0.15,
                                    BlurRadius=4,
                                    Color={Binding Source={RelativeSource AncestorType={x:Type vm:SomeViewModel}},  Path= EventBoxColor}}" >

OnViewModel
public Color EventBoxColor { get => Color.FromHex("#A56262"); }

@roubachof
Copy link
Owner

Sorry this is not the same issue

@PrajeetShrestha
Copy link

@roubachof So can you give me hints on how to solve this, BTW, I tried adding color with StaticResource in Xaml and it worked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants