Jump to content
LaunchBox Community Forums
Jason Carr

XAML Tips and Tricks

Recommended Posts

Have you tried binding to just,

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

Instead of..

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

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 🥰

Share this post


Link to post
Share on other sites
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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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! 😍

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@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 by eatkinola
Corrected theme name

Share this post


Link to post
Share on other sites

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 by viking

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)-

Screenshot_2.jpg

Screenshot_3.jpg

Share this post


Link to post
Share on other sites
1 hour ago, viking said:

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

Alright thanks a lot :)

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites
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 🙂

Share this post


Link to post
Share on other sites

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 by viking

Share this post


Link to post
Share on other sites
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 by G22

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...