Jump to content
LaunchBox Community Forums

XAML Tips and Tricks


Recommended Posts

@Grila with the following would you have an idea on how to resize an ellipse upon resolution change in the ListBoxItemStyle?

I find that whether its in a viewbox/canvas as it has a fixed width/height it does not change upon resolution change. I tried the similar datatriggers you showed me for resolution change but bigbox just throws an error upon opening.

<DockPanel x:Name="Bd">
	<Grid Width="20" Height="20">
		<Ellipse x:Name="Dot" Visibility="Hidden" Fill="Blue" Stretch="Fill"/>
	</Grid>
	<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" SnapsToDevicePixels="True" />
</DockPanel>

5ae84b97dc6f6_1920x1080.thumb.png.e674afa8460e49ff2af2525fa1b8289b.png5ae84ba3c07ed_800x600.thumb.png.94949bb5784c743670c66db3da16014b.png

Link to comment
Share on other sites

On ‎19‎/‎04‎/‎2018 at 12:42 PM, Grila said:

 

Put the converter on the elements themselves. Also, no need to put it on the date since you're showing year only. Example:


<TextBlock>
  <TextBlock.Text>
    <MultiBinding StringFormat="{}{0:yyyy}  *  {1} {2}">
      <Binding Path="ActivePlatform.ReleaseDate"/>
      <Binding Path="ActivePlatform.Cpu" Converter="{StaticResource TextTransformUppercase}"/>
      <Binding Path="ActivePlatform.Category" Converter="{StaticResource TextTransformUppercase}"/>
    </MultiBinding>
  </TextBlock.Text>
</TextBlock>

@Grila - I am trying to use the TextTransformUppercase as you were discussing with @wallmachine and whilst I think I have now got everything in the right place, with no errors in Visual Studio, when I run BigBox it errors on the <usercontrol.resource> section with regards to an unknown type. Any idea what I am missing? I am just trying to convert the binding ActiveGame.Title at this stage.

Link to comment
Share on other sites

Thanks for looking at this @Grila , this is the error I receive when the view is loaded in BigBoximage.thumb.png.7af94b7ab13dedf6008b9bac6903269a.pngI believe I have defined the resource in the view's usercontrol.resource section but here is the complete code for the XAML view. Hopefully you will spot something glaringly obvious that I have done wrong:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Wpf.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:cal="http://www.caliburnproject.org"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:controls="clr-namespace:Unbroken.LaunchBox.Wpf.Controls;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:g="clr-namespace:GrilaBBWeather;assembly=GrilaBBWeather"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:TextTransformUppercase="clr-namespace:TextTransformUppercase;assembly=TextTransformUppercase"

             mc:Ignorable="d"
             d:DesignHeight="2160" d:DesignWidth="3840" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
    
    <UserControl.Resources>
        <TextTransformUppercase:TextTransformUppercase x:Key="TextTransformUppercase"/>
    </UserControl.Resources>
    
    <Canvas Name="Canvas">
        <Grid Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3.125*"/>
                <ColumnDefinition Width="13.42*"/>
                <ColumnDefinition Width="2.4*"/>
                <ColumnDefinition Width="54.55*"/>
                <ColumnDefinition Width="0*"/>
                <ColumnDefinition Width="0*"/>
                <ColumnDefinition Width="0*"/>
                <ColumnDefinition Width="0*"/>
                <ColumnDefinition Width="23*"/>
                <ColumnDefinition Width="3.4375*"/>
            </Grid.ColumnDefinitions>

           
            
            <Grid Grid.ColumnSpan="10" Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="56.83*"/>
                    <RowDefinition Height="43.17*"/>
                </Grid.RowDefinitions>
                <Image Source="{Binding Path=SelectedGame.BackgroundImagePath}" Stretch="UniformToFill" Grid.RowSpan="2" VerticalAlignment="Bottom"/>
                <Image Source="{Binding Path=SelectedGame.BackgroundImagePath}" Stretch="UniformToFill" Grid.Row="1" VerticalAlignment="Bottom">
                    <Image.Effect>
                        <BlurEffect Radius="80"/>
                    </Image.Effect>
                </Image>
                <Rectangle Fill="#324049" Opacity="0.8" Grid.Row="1"/>
            </Grid>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3.88*"/>
                    <RowDefinition Height="4.62*"/>
                    <RowDefinition Height="5.55*"/>
                    <RowDefinition Height="41.48*"/>
                    <RowDefinition Height="39.26*"/>
                    <RowDefinition Height="4.44*"/>
                </Grid.RowDefinitions>
                <Image Source="{Binding Path=SelectedGame.FrontImagePath}" Grid.Row="4" VerticalAlignment="Top"/>
            </Grid>
            <Grid Grid.Column="8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="78.7*"/>
                    <RowDefinition Height="11.85*"/>
                    <RowDefinition Height="9.45*"/>
                </Grid.RowDefinitions>
                
                <!-- Start of ESRB Rating -->
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="45*"/>
                        <ColumnDefinition Width="16.5*"/>
                        <ColumnDefinition Width="38.5*"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock x:Name="ESRB" Visibility="Collapsed">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/Modernist/Images/ESRB/{0}.png">
                                <Binding Path="ActiveGame.Rating" />
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                    <Image Source="{}pack://siteoforigin:,,,/Themes/Modernist/Images/ESRB/NR.png" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Column="1"/>
                    <Image Source="{Binding Text, ElementName=ESRB}" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Column="1"/>

                    <Grid Grid.Column="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="55*"/>
                            <RowDefinition Height="20*"/>
                            <RowDefinition Height="25*"/>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10*"/>
                                <ColumnDefinition Width="90*"/>
                                <ColumnDefinition Width="0*"/>
                            </Grid.ColumnDefinitions>
                            <Viewbox Grid.Column="1" HorizontalAlignment="Left">
                                <TextBlock x:Name="GameESRB" Foreground="White" FontFamily="Segoe UI">
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="Text" Value="{Binding ActiveGame.Rating}" />
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding ActiveGame.Rating}" Value="" >
                                                    <Setter Property="Text" Value="NR - Not Yet Rated" />
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding ActiveGame.Rating}" Value="{x:Null}" >
                                                    <Setter Property="Text" Value="NR - Not Yet Rated" />
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>
                            </Viewbox>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <!-- End of ESRB Rating -->
            
            <Grid Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="62.22*"/>
                    <RowDefinition Height="2.77*"/>
                    <RowDefinition Height="2.59*"/>
                    <RowDefinition Height="4.63*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="2.59*"/>
                    <RowDefinition Height="11.66*"/>
                    <RowDefinition Height="10.19*"/>
                </Grid.RowDefinitions>
                <Viewbox Grid.Row="1" HorizontalAlignment="Left">
                    <TextBlock x:Name="GamePlatform" Text="{Binding Path=ActiveGame.Platform}"  Foreground="White" FontFamily="Segoe UI" />
                </Viewbox>
                <Viewbox Grid.Row="3" HorizontalAlignment="Left">
                    <TextBlock x:Name="GameName" Foreground="White" FontFamily="Segoe UI">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}{0}">
                                <Binding Path="ActiveGame.Title" Converter="{StaticResource TextTransformUppercase}"/>
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </Viewbox>
                <Grid Grid.Row="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="13*"/>
                        <ColumnDefinition Width="6.27*"/>
                        <ColumnDefinition Width="2.76*"/>
                        <ColumnDefinition Width="77.97*"/>
                    </Grid.ColumnDefinitions>
                    
                    <!-- Dynamic Star Ratings -->
                    <TextBlock x:Name="Stars" Visibility="Collapsed" HorizontalAlignment="Center">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Themes/BigBoxOne/Images/Theme/{0:F0}S.png">
                                <Binding Path="ActiveGame.CommunityStarRating" />
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                    <Image Source="{}pack://siteoforigin:,,,/themes/BigBoxOne/images/theme/No Stars.png" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" Opacity="0.3"/>
                    <Image Source="{Binding Text, ElementName=Stars}" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" />
                    <!-- End of Dynamic Star Rating-->
                    
                    <Viewbox Grid.Column="1" HorizontalAlignment="Center">
                        <TextBlock x:Name="StarValue" Text="{Binding Path=ActiveGame.ReleaseDate, StringFormat=yyyy}" Foreground="White" FontFamily="Uni Sans CAPS"/>
                    </Viewbox>
                    <Image x:Name="Divide" Source="{}pack://siteoforigin:,,,/themes/BigBoxOne/images/theme/Divide.png" RenderOptions.BitmapScalingMode="HighQuality" VerticalAlignment="Center" Grid.Column="2" HorizontalAlignment="Left"/>
                    <Viewbox Grid.Column="3" HorizontalAlignment="Left">
                        <TextBlock x:Name="Publisher" Text="{Binding Path=ActiveGame.Publisher}" Foreground="White" FontFamily="Uni Sans CAPS"/>
                    </Viewbox>                    
                </Grid>
                <coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="7" ImageType="Boxes" CurveAmount="0" CameraZPosition="8.4" VisibleCount="20" PageSize="8" ItemZPosition="1.0" SelectedItemZPosition="1.0" Spacing="1.6">
                    <coverFlow:FlowControl.CoverFactory>
                        <coverFlow:HorizontalWheelCoverFactory />
                    </coverFlow:FlowControl.CoverFactory>
                </coverFlow:FlowControl>
                <Grid Grid.Row="7">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="45.5*"/>
                        <ColumnDefinition Width="9*"/>
                        <ColumnDefinition Width="45.5*"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Fill="#324049" Opacity="0.4" Grid.Column="0"/>
                    <Rectangle Fill="#324049" Opacity="0.4" Grid.Column="2"/>
                </Grid>
                
            </Grid>
        </Grid>
    </Canvas>
</UserControl>

 

Link to comment
Share on other sites

On 5/1/2018 at 7:12 AM, wallmachine said:

@Grila with the following would you have an idea on how to resize an ellipse upon resolution change in the ListBoxItemStyle?

I find that whether its in a viewbox/canvas as it has a fixed width/height it does not change upon resolution change. I tried the similar datatriggers you showed me for resolution change but bigbox just throws an error upon opening.


<DockPanel x:Name="Bd">
	<Grid Width="20" Height="20">
		<Ellipse x:Name="Dot" Visibility="Hidden" Fill="Blue" Stretch="Fill"/>
	</Grid>
	<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}" SnapsToDevicePixels="True" />
</DockPanel>

5ae84b97dc6f6_1920x1080.thumb.png.e674afa8460e49ff2af2525fa1b8289b.png5ae84ba3c07ed_800x600.thumb.png.94949bb5784c743670c66db3da16014b.png

How about if you made the dot with text (•) so it could scale with the text size?

Link to comment
Share on other sites

9 hours ago, Grila said:

Did you compile your own converter for this or are you using someone elses DLL?

It was my first attempt at compiling my own converter though it is just a copy and paste of the converter you provided earlier in this post. It may well be that I have done something wrong when compiling the DLL.

 

Link to comment
Share on other sites

Ok, if you can be patient with me I'll send you my DLL. I'm currently on vacation, so in between watching my kids and the beach, my access to my laptop is limited to the evening. I'll get your problem solved though, I promise. 

Link to comment
Share on other sites

 

26 minutes ago, Grila said:

Ok, if you can be patient with me I'll send you my DLL. I'm currently on vacation, so in between watching my kids and the beach, my access to my laptop is limited to the evening. I'll get your problem solved though, I promise. 

That’s great thanks very much @Grila and don’t worry about messing with this whilst on vacation. Enjoy your time with family, this can wait until you’re back. thanks again for all your help.

  • Like 1
Link to comment
Share on other sites

OK @shro2016:

1. Download the DLL, unblock it, and put it in your theme's "Plugins" folder.

GrilaUtils.dll

 

2. Declare the namespace in any and all views you wish to use it in:

xmlns:g="clr-namespace:GrilaUtils;assembly=GrilaUtils"

The "g" letter can be changed to suit your needs, I always just use "g" because it's short and the first letter of my name.

 

3. Define the converter as a static resource in any and all views you wish to use it it:

<UserControl.Resources>
    <g:UppercaseText x:Key="UppercaseTextConverter"/>
</UserControl.Resources>

 

4. Use the converter on your targeted text

<TextBlock Text="{Binding Path=ActivePlatform.Name, Converter={StaticResource UppercaseTextConverter}}" Foreground="White" FontSize="36" FontFamily="Arial"/>

 

Note: If you are using Visual Studio, you'll have to add a reference to the DLL to avoid errors in the designer. If you are using a regular text-editor such as Notepad++, the steps outlined above will be sufficient.

 

Sorry if this explanation is too dumbed down for you (I'm not trying to insult). I just thought I'd outline all the steps for anyone looking back through this thread for help. 

  • Like 2
Link to comment
Share on other sites

22 hours ago, Grila said:

OK @shro2016:

1. Download the DLL, unblock it, and put it in your theme's "Plugins" folder.

GrilaUtils.dll

 

2. Declare the namespace in any and all views you wish to use it in:


xmlns:g="clr-namespace:GrilaUtils;assembly=GrilaUtils"

The "g" letter can be changed to suit your needs, I always just use "g" because it's short and the first letter of my name.

 

3. Define the converter as a static resource in any and all views you wish to use it it:


<UserControl.Resources>
    <g:UppercaseText x:Key="UppercaseTextConverter"/>
</UserControl.Resources>

 

4. Use the converter on your targeted text


<TextBlock Text="{Binding Path=ActivePlatform.Name, Converter={StaticResource UppercaseTextConverter}}" Foreground="White" FontSize="36" FontFamily="Arial"/>

 

Note: If you are using Visual Studio, you'll have to add a reference to the DLL to avoid errors in the designer. If you are using a regular text-editor such as Notepad++, the steps outlined above will be sufficient.

 

Sorry if this explanation is too dumbed down for you (I'm not trying to insult). I just thought I'd outline all the steps for anyone looking back through this thread for help. 

Thanks @Grila I will check this out now and no your explanation is spot on! Whilst I have used visual studio for doing the visual elements I do not understand sufficiently the use of classes and plugins so having a step by step like this is very useful as I am sure it will be for others that come across this post. Thanks again and I will let you know how I get on.

Link to comment
Share on other sites

@Grila having gone through your instructions this works spot on and I have also managed to get my original DLL to also work now. The issue was something remarkably stupid and not sure why I had done it but rather than placing the DLL I had created in the plugins folder I had placed it inside the references folder within the theme folder. Having now moved it this is working.

Thanks a lot for your help with this and apologies that it was something so simple in the end that I was doing wrong (as I suspected it might be).

Link to comment
Share on other sites

with the following say the {1} CPU information was missing is it possible to move Category to {1} so we don't have the white space that is created from {1} CPU because of no data. I guess this would work vice versa.

 

                    <TextBlock>
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}{0:yyyy}  ·  {1} {2}" >
                                <Binding Path="SelectedPlatform.ReleaseDate"   />
                                <Binding Path="SelectedPlatform.Cpu" />
                                <Binding Path="SelectedPlatform.Category" />
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>

 

Link to comment
Share on other sites

<TextBlock>
  <TextBlock.Text>
    <MultiBinding StringFormat="{}{0:yyyy}  ·  {1} {2}" >
      <Binding Path="SelectedPlatform.ReleaseDate" FallbackValue="{x:Null}"/>
      <Binding Path="SelectedPlatform.Cpu" FallbackValue="{x:Null}"/>
      <Binding Path="SelectedPlatform.Category" FallbackValue="{x:Null}"/>
    </MultiBinding>
  </TextBlock.Text>
</TextBlock>

Try this.

  • Thanks 1
Link to comment
Share on other sites

On ‎5‎/‎11‎/‎2018 at 6:30 AM, shro2016 said:

Thanks @Grila I will check this out now and no your explanation is spot on! Whilst I have used visual studio for doing the visual elements I do not understand sufficiently the use of classes and plugins so having a step by step like this is very useful as I am sure it will be for others that come across this post. Thanks again and I will let you know how I get on.

So @Grila I could build a .dll to split out elements from the Genre String ?

Example...

ActiveGame.GenresString contains a value of   "Puzzle;Racing;Strategy"

 

<TextBlock x:Name="Genre1" Text="{Binding Path=ActivePlatform.GenresString, Converter={StaticResource Get1stElement}}"   />

<TextBlock x:Name="Genre2" Text="{Binding Path=ActivePlatform.GenresString, Converter={StaticResource Get2ndElement}}"   />

<TextBlock x:Name="Genre3" Text="{Binding Path=ActivePlatform.GenresString, Converter={StaticResource Get3rdElement}}"   />

 

"Genre1" Text="Puzzle"

"Genre2" Text="Racing"

"Genre3" Text="Strategy"

Now a .png can be displayed per the value in each of the textblocks.

Edited by y2guru
Link to comment
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
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
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...