viking Posted September 23, 2019 Share Posted September 23, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Rincewind Posted September 23, 2019 Share Posted September 23, 2019 Have you tried binding to just, {Binding Path=Platform.Name, NotifyOnTargetUpdated=True} Instead of.. {Binding Path=SelectedPlatform.Name, NotifyOnTargetUpdated=True} Quote Link to comment Share on other sites More sharing options...
Undertherainbow Posted September 26, 2019 Share Posted September 26, 2019 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> Quote Link to comment Share on other sites More sharing options...
Rincewind Posted September 28, 2019 Share Posted September 28, 2019 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. 1 Quote Link to comment Share on other sites More sharing options...
Undertherainbow Posted September 28, 2019 Share Posted September 28, 2019 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 Quote Link to comment Share on other sites More sharing options...
viking Posted October 11, 2019 Share Posted October 11, 2019 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 ? Quote Link to comment Share on other sites More sharing options...
Grila Posted October 11, 2019 Share Posted October 11, 2019 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. 1 Quote Link to comment Share on other sites More sharing options...
viking Posted October 11, 2019 Share Posted October 11, 2019 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! ? Quote Link to comment Share on other sites More sharing options...
viking Posted October 11, 2019 Share Posted October 11, 2019 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? Quote Link to comment Share on other sites More sharing options...
eatkinola Posted October 11, 2019 Share Posted October 11, 2019 (edited) @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 Quote Link to comment Share on other sites More sharing options...
viking Posted October 11, 2019 Share Posted October 11, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
eatkinola Posted October 11, 2019 Share Posted October 11, 2019 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. Quote Link to comment Share on other sites More sharing options...
viking Posted October 11, 2019 Share Posted October 11, 2019 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. Quote Link to comment Share on other sites More sharing options...
Light Sock Posted October 17, 2019 Share Posted October 17, 2019 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 :)- Quote Link to comment Share on other sites More sharing options...
viking Posted October 17, 2019 Share Posted October 17, 2019 I take a look tomorrow. (10pm here) ? Quote Link to comment Share on other sites More sharing options...
Light Sock Posted October 17, 2019 Share Posted October 17, 2019 1 hour ago, viking said: I take a look tomorrow. (10pm here) ? Alright thanks a lot Quote Link to comment Share on other sites More sharing options...
viking Posted October 18, 2019 Share Posted October 18, 2019 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 ! Quote Link to comment Share on other sites More sharing options...
Light Sock Posted October 18, 2019 Share Posted October 18, 2019 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 ? Quote Link to comment Share on other sites More sharing options...
viking Posted October 18, 2019 Share Posted October 18, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Light Sock Posted October 18, 2019 Share Posted October 18, 2019 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.