question

MGBhadurudeen-1345 avatar image
0 Votes"
MGBhadurudeen-1345 asked ·

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

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

danielescipioni avatar image
0 Votes"
danielescipioni answered ·

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 · Share
10 |1000 characters needed characters left characters exceeded

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

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 Votes 0 · ·
  • 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 Votes 0 · ·

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

0 Votes 0 · ·
RoyLi-MSFT avatar image
0 Votes"
RoyLi-MSFT answered ·

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 · Share
10 |1000 characters needed characters left characters exceeded

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

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 Votes 0 · ·
RoyLi-MSFT avatar image RoyLi-MSFT MGBhadurudeen-1345 ·

Do @danielescipioni 's solutions make sense?

0 Votes 0 · ·

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 Votes 0 · ·