XAML Tips and Tricks

[viking]

Thx @Rincewind ! I'm not far from your solution.
My problem is that the object must be invisible 5sec. Then pulse. Then be invisible 5sec with each change of platform.

I just updated my code, 1 post above.

Always need help ?

Edited September 23, 2019 by viking

[Rincewind]

Have you tried binding to just,

{Binding Path=Platform.Name, NotifyOnTargetUpdated=True}

Instead of..

{Binding Path=SelectedPlatform.Name, NotifyOnTargetUpdated=True}

 

[Undertherainbow]

How do you control when will target start doing its animation movement? I understand it activates on triggers, but can i actually delay function to execute?

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="CoverImage">
                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-4320"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-150"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.15" Value="-30"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

 

[Rincewind]

You can adjust the time by changing how long in seconds, so below would make the animation start at 5 seconds

KeyTime="0:0:5.0"

 So in your example the "CoverImage" will start at KeyTime="0:0:0.0" then at each increase of time will move to the Value. So at KeyTime="0:0:0.9" (.9 of a second) it will move to the Value="0" (zero being its default position) and so on through to 1.2 seconds. Hope that makes sense, others will probably be able to help more because I'm only learning this from a trial and error way.

[Undertherainbow]

1 hour ago, Rincewind said:

You can adjust the time by changing how long in seconds, so below would make the animation start at 5 seconds

KeyTime="0:0:5.0"

 So in your example the "CoverImage" will start at KeyTime="0:0:0.0" then at each increase of time will move to the Value. So at KeyTime="0:0:0.9" (.9 of a second) it will move to the Value="0" (zero being its default position) and so on through to 1.2 seconds. Hope that makes sense, others will probably be able to help more because I'm only learning this from a trial and error way.

 

AH i got it now. Thanks

[viking]

Hi all !
Back with a new challenge for all code master! ?

I want to find a way to adjust the RatingStar color with hex code.

 

Actually, I'm using this piece of code:

<StackPanel  Grid.Column="2" Grid.Row="10">
                <TextBlock x:Name="Stars" Visibility="Collapsed">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Colorful/Colorful_img/Stars/{0:F1}.png">
                            <Binding Path="ActiveGame.CommunityOrLocalStarRating" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
                <Image Source="{Binding Text, ElementName=Stars}" x:Name="RatingStars" Grid.Column="2" Grid.Row="9" HorizontalAlignment="Center" VerticalAlignment="Stretch" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />
</StackPanel>

It works very well with its 52 PNG images. But stars colors are fixed in image. No way to change them on the fly!

 

IDEA 01 - Binding Rating to a ScaleX on a Rectangle. Like a loading bar, with a stars PNG overlay.
But my research seems to show that it's impossible. You confirmed?
In addition, I will need a converter: To transform the notes, from a scale   0.0> 5.0  to a scale   0.0> 1.0    And that, I still dont know how to do! (Shame)

IDEA 02 - Use DataTrigger to change numeric note, into text with a stars picto custom font.
If A=EmptyStar , B=HaltStar , C=FullStar ---- for exemple, a note of  2.5 > CCBAA
Problem : It is very limited in design and precision side. In addition, I cant have a working prototype.

 

In summary, I can not make my ideas work. They must be bad!
If you had to do that, how would you do it? Ideas? Examples?
@Grila @eatkinola @Jason Carr ... and all code master : THX A LOT ?

[Grila]

31 minutes ago, viking said:

Hi all !
Back with a new challenge for all code master! ?

I want to find a way to adjust the RatingStar color with hex code.

 

Actually, I'm using this piece of code:

<StackPanel  Grid.Column="2" Grid.Row="10">
                <TextBlock x:Name="Stars" Visibility="Collapsed">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Colorful/Colorful_img/Stars/{0:F1}.png">
                            <Binding Path="ActiveGame.CommunityOrLocalStarRating" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
                <Image Source="{Binding Text, ElementName=Stars}" x:Name="RatingStars" Grid.Column="2" Grid.Row="9" HorizontalAlignment="Center" VerticalAlignment="Stretch" Stretch="Fill" RenderOptions.BitmapScalingMode="HighQuality" />
</StackPanel>

It works very well with its 52 PNG images. But stars colors are fixed in image. No way to change them on the fly!

 

IDEA 01 - Binding Rating to a ScaleX on a Rectangle. Like a loading bar, with a stars PNG overlay.
But my research seems to show that it's impossible. You confirmed?
In addition, I will need a converter: To transform the notes, from a scale   0.0> 5.0  to a scale   0.0> 1.0    And that, I still dont know how to do! (Shame)

IDEA 02 - Use DataTrigger to change numeric note, into text with a stars picto custom font.
If A=EmptyStar , B=HaltStar , C=FullStar ---- for exemple, a note of  2.5 > CCBAA
Problem : It is very limited in design and precision side. In addition, I cant have a working prototype.

 

In summary, I can not make my ideas work. They must be bad!
If you had to do that, how would you do it? Ideas? Examples?
@Grila @eatkinola @Jason Carr ... and all code master : THX A LOT ?

Look at my GPDWin theme in the WheelGamesView. I did something similar but with a gradient so it may help you with what you need.

[viking]

Thx @Grila ! ?
I take a look at your GPDwin Theme and your stars code. It's massive! ?
I tried to understand and adapt quickly to my theme, but I have too much error.
In addition, I dont master enough SVG to change the design that you put in place.

At the end, I need to animate the entire block and add the ability to change the color on the fly. (aka acording to the platform, with @eatkinola plugin)
That's why I'd like a simpler code. Like my first idea of binding the rating to a ScaleX Rectangle. (or Canvas, Button ...)

If someone has a track to make it work, it will be GREAT! ?

[viking]

OK ! I managed to make a functional prototype !!!
Here is the code : 

<Canvas x:Name="test" Grid.Column="2" Grid.Row="12" Margin="10" Background="Yellow">
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform>
                            <ScaleTransform.ScaleX>
                                <Binding Path="ActiveGame.CommunityOrLocalStarRating"/>
                            </ScaleTransform.ScaleX>
                        </ScaleTransform>
                    </TransformGroup>
                </Canvas.RenderTransform>
            </Canvas>

 

It works very well! But there is a problem:
The ScaleX is on a scale of  0.0>1.0
The Rating is on a scale of  0.0>5.0

My Canvas rises to 500% of its size in width and exceeds its grid.
So, I dont know if I need a converter or if I can force it with minimum/maximum values directly into XAML.
Any ideas ?

@eatkinola Do you think this formula will work with your Color plugin?

[eatkinola]

@viking You could try tinting an image of white stars like this. I used this tinting approach in Minimal-AO:

https://stackoverflow.com/questions/28247010/tint-a-partially-transparent-image-in-wpf

That should work, and you should also be able to use it with the platform to color converter I provided you.

Edited October 11, 2019 by eatkinola
Corrected theme name

[viking]

Thx @eatkinola
I'm going to try.

But this method seems to me more rigid than my last example with the ScaleX on Canvas.
For example, perhaps I can animate the effect from 0 to the rating, for a loading effect! Can be cool!

I managed to have the functional effect in my theme, animated as I wish. I still have 2 blocking points:

• Are I needing a converter for the scale value? (see my previous post) Or it's can be manage in XAML ?
• Your plugin doesnt seem to work in GamesView and/or with "Fill" and "Background" value. But probably I'm doing something wrong.

 

EDIT : 
Here is my actual code.
Whis : A gret background + the "stars loading bar" + the PNG overlay

<!-- COMMUNITY OR USER STARS (Background) -->
            <Rectangle x:Name="StarsBG" Grid.Column="3" Grid.Row="10" Fill="#d6d6d6" Margin="1"/>

            <!-- COMMUNITY OR USER STARS (Stars Color) -->
            <Canvas x:Name="StarsColor" Grid.Column="3" Grid.Row="10" Margin="1">
                <Canvas.Background>
                    <MultiBinding Converter="{StaticResource FilterSelectionColorConverter}">
                        <Binding ElementName="SelectionSnoop" Path="UpdatedTimestamp" />
                        <Binding ElementName="SelectionSnoop" />
                        <Binding Source="{StaticResource DefaultPlatformColor}" />
                    </MultiBinding>
                </Canvas.Background>
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform>
                            <ScaleTransform.ScaleX >
                                <Binding Path="ActiveGame.CommunityOrLocalStarRating"/>
                            </ScaleTransform.ScaleX>
                        </ScaleTransform>
                    </TransformGroup>
                </Canvas.RenderTransform>
            </Canvas>
            
            <!-- COMMUNITY OR USER STARS (Design Overlay) -->
            <Image x:Name="StarsOverlay" Grid.Column="3" Grid.Row="10" Source="pack://siteoforigin:,,,/Themes/Colorful/Colorful_img/Colorful_RatingStars_Overlay_Light.png" Stretch="Uniform" RenderOptions.BitmapScalingMode="HighQuality" >
                <Image.RenderTransform>
                    <TranslateTransform x:Name="StarsOverlayAnim" Y="0"/>
                </Image.RenderTransform>
            </Image>

 

Edited October 11, 2019 by viking

[eatkinola]

1 hour ago, viking said:

Your plugin doesnt seem to work in GamesView and/or with "Fill" and "Background" value. But probably I'm doing something wrong.

All the plugin does is convert a platform, playlist, or category name to a SolidColorBrush. I'll need to update it to work for games views, but that should be easy.

[viking]

You're right, it works perfectly with "Fill" and "Background" value. I misinterpreted my mistakes!
Just, I can not figure out how to integrate it into a gradient (like the exemple a send you). And GamesView.

About the stars.
Rest this story of converter. How to do it ?

• input : "SelectedGame.CommunityOrLocalStarRating" value >> from 0.0 to 5.0
• output : ScaleX value >> from 0.0 to 1.0

I assume that it must be simple to put in place. But I can not find a concrete example online to create my converter.

[Light Sock]

Hi my dear friends! I have a bartop with a 16x9  Full HD screen. I want to use the 4x3 Hyperspin video pack from EmuMovies. I found what seems to be the perfect theme so far which is "Bartop" by viking. I think you're still active on the forum so maybe you could help me out with this!

What is happening at the moment is that the video is stretched to 16:9. So the left wheel is overlapping the video and the video aspect ratio is broken. See attached image "Screenshot_2.jpg".

I'm using the "WheelGamesView.xaml" and found out that this line seems to be what I'm looking for to edit

<transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" IsContentVideo="true" />

I've tried forcing the aspect ratio by giving it width and height properties like that

        <transitions:TransitionPresenter TransitionSelector="{Binding BackgroundTransitionSelector}" Content="{Binding BackgroundView}" Height="1080" Width="1440" IsContentVideo="true" />

It works but the video is centered and no matter what I try it stays centered. See "Screenshot_3.jpg" I tried things like that before "content"

VerticalAlignment="Stretch" HorizontalAlignment="Right"

I've tried both VLC and WMP and WMP is laggy and have trouble loading some videos, so this is a no go for me.

Who could help me align the video to the right keeping it's 4:3 aspect ratio?

Thanks a lot :)-

[viking]

I take a look tomorrow. (10pm here) ?

[Light Sock]

1 hour ago, viking said:

I take a look tomorrow. (10pm here) ?

Alright thanks a lot

[viking]

OK. So, in WheelGamesView.xaml , found line 66 this piece of code : 

<!-- VIDEO BACKGROUND -->
            <Viewbox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center">
                <transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true"/>
            </Viewbox>

Delete and replace with this piece of code :
 

<!-- VIDEO BACKGROUND -->
            <transitions:TransitionPresenter x:Name="vidsource" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="True" Visibility="hidden"/>
            <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18">
                <Border.Background>
                    <VisualBrush Visual="{Binding ElementName=vidsource, Path=Content}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
                </Border.Background>
            </Border>

This code was written by Grila. thanks to him ! It must work, but break the transition effects.
Follow the link, he wrote another answer a little lower that preserves the transition, but I can not test it now.

 

This theme deserves a total rewriting. But I'm focused on Colorful right now. I do my best !

[Light Sock]

5 hours ago, viking said:

OK. So, in WheelGamesView.xaml , found line 66 this piece of code : 

<!-- VIDEO BACKGROUND -->
            <Viewbox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center">
                <transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true"/>
            </Viewbox>

Delete and replace with this piece of code :
 

<!-- VIDEO BACKGROUND -->
            <transitions:TransitionPresenter x:Name="vidsource" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="True" Visibility="hidden"/>
            <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18">
                <Border.Background>
                    <VisualBrush Visual="{Binding ElementName=vidsource, Path=Content}" Stretch="UniformToFill" AlignmentX="Center" AlignmentY="Center"/>
                </Border.Background>
            </Border>

This code was written by Grila. thanks to him ! It must work, but break the transition effects.
Follow the link, he wrote another answer a little lower that preserves the transition, but I can not test it now.

 

This theme deserves a total rewriting. But I'm focused on Colorful right now. I do my best !

I'm not sure we're talking about the BarTop theme or maybe I have an old version of it?

Because there's unfortunately no code like you pasted

<!-- VIDEO BACKGROUND -->
            <Viewbox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="25" Grid.RowSpan="18" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center">
                <transitions:TransitionPresenter TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="true"/>
            </Viewbox>

Here's my "WheelGamesView.xaml" file https://pastebin.com/1xVUr9ST

Thanks for your help ?

[viking]

Strange ? 

But yes, try to replace all this by the code I give you.

Edit : probably a difference between "forum" and "in Bigbox" version ... I realy need to rewrite all this theme !

Edited October 18, 2019 by viking

[Light Sock]

17 minutes ago, viking said:

Strange ? 

But yes, try to replace all this by the code I give you.

I already tried and it doesn't work. Basically I've removed the part of the code that removed the video. And tried adding the code you sent me. I have a black screen and no video is playing.

I feel like this code would be more what I'm looking for but also can't have the video to show

<Grid ClipToBounds="True" Grid.Column="1">
  <transitions:TransitionPresenter x:Name="vidsource" TransitionSelector="{Binding ImageVideoTransitionSelector}" Content="{Binding ImageVideoView}" IsContentVideo="True" Visibility="Visible" Margin="-480,0,0,0" Width="{Binding ElementName=Canvas, Path=ActualWidth}" Height="{Binding ElementName=Canvas, Path=ActualHeight}"/>
</Grid>

Thanks for helping me !

Edited October 18, 2019 by G22