x:bind not works in color value

Question

question

MGBhadurudeen-1345 asked · Jun 12, 2020 at 03:30 AM

x:bind not works in color value

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>

windows-uwp-xaml

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2020-06-12T10:45:14.82Z

danielescipioni answered · Jun 12, 2020 at 10:45 AM

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();
};

· 3 ·

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MGBhadurudeen-1345 · Jun 14, 2020 at 12:37 AM

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.

0 ·

danielescipioni MGBhadurudeen-1345 · Jun 14, 2020 at 07:58 AM

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}"/>

0 ·

MGBhadurudeen-1345 danielescipioni · Jun 17, 2020 at 06:08 AM

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

0 ·

Answer 2 · 2020-06-12T06:20:20.713Z

RoyLi-MSFT answered · Jun 12, 2020 at 06:20 AM

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.

· 3 ·

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MGBhadurudeen-1345 · Jun 14, 2020 at 12:33 AM

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.

0 ·

RoyLi-MSFT MGBhadurudeen-1345 · Jun 16, 2020 at 01:45 AM

Do @danielescipioni 's solutions make sense?

0 ·

MGBhadurudeen-1345 RoyLi-MSFT · Jun 17, 2020 at 06:06 AM

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}"/>

0 ·

question