Search code examples
c#windowsxamluwpxbind

Using x:Phase with image inside ImageBrush

I design an UWP app and I glad to use new features such as x:Bind and x:Phase.

I have a simple model (containers such as Grid and StackPanel omitted):

<TextBlock Text="{x:Bind Title}" x:Phase="0" />
<TextBlock Text="{x:Bind Date}" x:Phase="1" />

<Ellipse Stretch="UniformToFill">
   <Ellipse.Fill>
       <ImageBrush ImageSource="{x:Bind Image}" />
   </Ellipse.Fill>
</Ellipse>

So I want to specify x:Phase for image but I can't do this due to obvious constraints: x:Phase is presented only for FrameworkElement so I can't specify ImageBrush's x:Phase and it has to be specified with x:Bind so I can't use it on Ellipse.

It's weird to use x:Phase with text and allow to image load first. How to solve this?

UPD: There is a hack!

Set any unimportant property to its default value through x:Bind to fake model property. One code line instead of dozens.

<Ellipse Stretch="UniformToFill" CanDrag="{x:Bind PlaceholderCanDrag}" x:Phase="2">
    <Ellipse.Fill>
        <ImageBrush ImageSource="{x:Bind Image}" />
    </Ellipse.Fill>
</Ellipse>
Solution

  • x:Phase has been introduced to simplify the phasing process, in other words so that you don't need to write code yourself.

    SO 'maybe' you could try to implement the phasing again through code? I know it's a lot of work but could be the only thing that would work with Ellipse.

    A good start example can be found here http://mcnextpost.com/2015/11/10/uwpxaml-compiled-binding-incremental-rendering-with-xphase/

    You'll need to hook up to the GridView / ListView ContainerContentChanging event and work through the phases from there