x:bind not works in color value

MG Bhadurudeen 626

Hi, I have a viewmodel for setting theme colors. setting the primary color in xaml using Binding works without any issue, even during design time, it shows the default color in the page/grid. However if I change the Binding to x:Bind it does not work. How to solve this? where am I doing wrong?

<Page.Resources>
       <themeViewModels:ThemeViewModel x:Key="ThemeViewModel"/>
</Page.Resources>

<Grid Grid.Column="1" 
              DataContext="{StaticResource ThemeViewModel}">
                <Grid.Background>
                    <SolidColorBrush x:Name="ss" Color="{x:Bind PrimaryColor, Mode=OneWay}"/>
                </Grid.Background>
</Grid>

Accepted answer

Daniele 1,996 Reputation points

2020-06-12T10:45:14.82+00:00
With x:Bind you have to do the following

set your ThemeViewModel as Page.DataContext and bind Color to _viewModel.PrimaryColor <Page.DataContext>
<themeViewModels:ThemeViewModel/>
</Page.DataContext>
<Grid Grid.Column="1">
<Grid.Background>
<SolidColorBrush x:Name="ss" Color="{x:Bind _viewModel.PrimaryColor, Mode=OneWay}"/>
</Grid.Background>
</Grid>

declare field _viewModel in your Page code behind private ThemeViewModel _viewModel;

use DataContextChanged event: add this code in your page constructor DataContextChanged += (sender, args) =>
{
if (_viewModel == args.NewValue || !(args.NewValue is ThemeViewModel themeViewModel)) return;
_viewModel = themeViewModel;
Bindings.Update();
};
Please sign in to rate this answer.
MG Bhadurudeen 626 Reputation points

2020-06-14T00:37:35.593+00:00

Hi Danielescipioni, Thank you for your answer. I have already set another DataContext in code behind, for this page to display user details. I want to set this ThemeViewModel for displaying colors. So setting it in the DataContext of the page does not help me.

Daniele 1,996 Reputation points

2020-06-14T07:58:44.107+00:00

You can use a resource dictionary <Page.Resources>
<ResourceDictionary>
<Color x:Key="PrimaryColor">#FF010203</Color>
</ResourceDictionary>
</Page.Resources>

and

<Grid Grid.Column="1"> <Grid.Background> <SolidColorBrush x:Name="ss" Color="{StaticResource PrimaryColor}"/> </Grid.Background> </Grid>

or you can add a ThemeViewModel property to your other page datacontext and bind through that property: <SolidColorBrush x:Name="ss" Color="{x:Bind _viewModel.ThemeViewModel.PrimaryColor, Mode=OneWay}"/>

MG Bhadurudeen 626 Reputation points

2020-06-17T06:08:50.643+00:00

I prefer the second solution.
<SolidColorBrush x:Name="ss" Color="{x:Bind _viewModel.ThemeViewModel.PrimaryColor, Mode=OneWay}"/>
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

1 additional answer

Roy Li - MSFT 33,001 Reputation points Microsoft Vendor

2020-06-12T06:20:20.713+00:00
Hello,

Welcome to Micorsoft Q&A!

There is something that you might misunderstand with data-binding.

The x:bind markup will automatically use the code-behind as the Datacontext. If you are using x:bind, it will only look up for properties from the code-behind instead of the view model you put in the page resource. If you want to set your view model as Datacontext, you could use Binding markup

The correct way to set DataContext in Xaml is to call Page.Datatext not Page.resources.

Another thing is that please also check the PrimaryColor property to make sure it is a Color object.

I have a code snippet that works correctly, you could check it.

<Page.DataContext> <local:ThemeViewModel x:Name="ThemeViewmodel"/> </Page.DataContext> <Grid > <Grid Grid.Column="1" > <Grid.Background> <SolidColorBrush x:Name="ss" Color="{Binding mycolor, Mode=OneWay}"/> </Grid.Background> </Grid> </Grid>

You could also refer to these documents for more information about data binding: Data binding overview, Data binding in depth

Thank you.
Please sign in to rate this answer.
MG Bhadurudeen 626 Reputation points

2020-06-14T00:33:50.49+00:00

Hi RoyLi-MSFT,

Thank you for your answer. Yes, I have used the PrimaryColor property correctly, it is a Color object. It works in 'Binding' well.

The reason I have I set the DataContent in resources is, I have already set another DataContext in code behind, for this page to display user details. I want to set this ThemeViewModel for displaying colors. So setting it in the page context does not help me.

Roy Li - MSFT 33,001 Reputation points Microsoft Vendor

2020-06-16T01:45:00.683+00:00

Do @Daniele 's solutions make sense?

MG Bhadurudeen 626 Reputation points

2020-06-17T06:06:51.293+00:00

Though the suggestion to use resource dictionary does not answer my question,
The other solution somehow fulfills my requirement, since I could not find another solution.
This one. <SolidColorBrush x:Name="ss" Color="{x:Bind _viewModel.ThemeViewModel.PrimaryColor, Mode=OneWay}"/>
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

x:bind not works in color value

1 additional answer

Your answer