XAML Tips and Tricks

Grila · April 30, 2018

I presume Jason has some way of calculating it, since with the original one we can't change it at all.

wallmachine · April 30, 2018

10 minutes ago, Grila said:

I presume Jason has some way of calculating it, since with the original one we can't change it at all.

ahk hopefully he can chime in so you can include in your plugin.

Edited April 30, 2018 by wallmachine

wallmachine · April 30, 2018

@Grila i had to try and thanks the datatriggers worked.

hope the same will be for the Ellipse when i try it tomorrow.

Edited April 30, 2018 by wallmachine

wallmachine · May 1, 2018

@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>

shro2016 · May 7, 2018

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.

Grila · May 8, 2018

Did you define the resource in the view's usercontrol.resources?

Attach a copy of the xaml file and I'll take a closer look.

shro2016 · May 8, 2018

Thanks for looking at this @Grila , this is the error I receive when the view is loaded in BigBoxI 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>

Grila · May 9, 2018

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

Grila · May 9, 2018

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>

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

wallmachine · May 9, 2018

2 hours ago, Grila said:

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

yes it scales but im not allowed to set a custom width/height without it pushing the textlist apart.

shro2016 · May 9, 2018

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.

Grila · May 9, 2018

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.

shro2016 · May 9, 2018

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.

Grila · May 10, 2018

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.

shro2016 · May 11, 2018

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.

shro2016 · May 11, 2018

@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).

Grila · May 11, 2018

Awesome, glad you got it sorted

wallmachine · May 12, 2018

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>

Grila · May 12, 2018

<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.

y2guru · May 14, 2018

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"

"Genre1" Text="Puzzle"

"Genre2" Text="Racing"

"Genre3" Text="Strategy"

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

Edited May 14, 2018 by y2guru

XAML Tips and Tricks

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

imdavid555

Supreme

elborra

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation