XAML Tips and Tricks

[Rincewind]

If you change the default platform clear logos then that will change them for all themes (unless there are already platform clear logos in that theme folder).

I only ever add platform clear logos to the themes I want them in...so..... C:\Users\computername\LaunchBox\Themes\Rincewind\Images\Platforms\Clear Logo

But if you wanted custom Game Clear logos then yes the only way is to overwrite the old clear logos  

[y2guru]

i wish you could have Theme Specific GAME clear logos similar to how you can create Theme specific Platform Clear Logos, oh well.....

[wallmachine]

@Grila thanks for your ListBoxScrollCenter plugin.

Could you help me with the following? before i was able to use <Style="{DynamicResource ListBoxStyle}"> to change just the colour/font, etc of the TextListView only and it wouldn't effect the menu colour/font, etc. With the plugin now I need to change the values in ListBoxItemStyle (unless I don't?) and it changes everything in the TextListView/Menus. I'm not sure of how to just change the TextListView with your plugin.

 

[Grila]

Could you show me some screenshots of how you did it before? It's not making sense to me. The vanilla listbox on all views (filter view, game view, system menu, options menu)  gets it's style from the ListBoxStyle and ListBoxItemStyle files. This plugin does the exact same thing, gets its styling from ListBoxStyle and ListBoxItemStyle.

Post your old code that you used before switching so I can examine.

[wallmachine]

On 4/26/2018 at 8:42 PM, Grila said:

Could you show me some screenshots of how you did it before? It's not making sense to me. The vanilla listbox on all views (filter view, game view, system menu, options menu)  gets it's style from the ListBoxStyle and ListBoxItemStyle files. This plugin does the exact same thing, gets its styling from ListBoxStyle and ListBoxItemStyle.

Post your old code that you used before switching so I can examine.

 

I guess also on a side note do you know how to make an Ellipse responsive for resolution changing?

 

Output:

 

Edited May 7, 2018 by wallmachine

[Grila]

I see, you're setting the styles directly in the view instead of using the resource dictionary. Let me think on this one for a minute. 

And for the ellipse, wrap it in a viewbox for it to be responsive.

[Grila]

3 minutes ago, Grila said:

I see, you're setting the styles directly in the view instead of using the resource dictionary. Let me think on this one for a minute. 

Are you doing this just to prevent the dot in the menu? If not, please explain why you didn't just use the resource dictionary to style it.

[wallmachine]

26 minutes ago, Grila said:

I see, you're setting the styles directly in the view instead of using the resource dictionary. Let me think on this one for a minute. 

And for the ellipse, wrap it in a viewbox for it to be responsive.

unfortunately it doesn't stay the same size if i'm creating an ellipse or use an image under ControlTemplate, must be something to do with the ContentPresenter.

 

22 minutes ago, Grila said:

Are you doing this just to prevent the dot in the menu? If not, please explain why you didn't just use the resource dictionary to style it.

Yes to not have the dot in the menu and to have different colours/highlights, also when using the fontsize in the plugin for me it doesn't change upon resolution change.

Edited April 26, 2018 by wallmachine

[Grila]

The scaling issues affect every theme unfortunately. There are some hacky workarounds like wrapping the element in a viewbox with a set width/height and then setting the element to the same width/height, but it's not possible to do on some elements where you don't know the size.

I'm still trying to get the new list to scale according to resolution, but in the meantime that has to be adjusted manually with the font-size. Example...If at 100% Windows scaling you have it set to 32, at 150% scaling you'd have to decrease it. It won't change automatically (for now).

[wallmachine]

28 minutes ago, Grila said:

The scaling issues affect every theme unfortunately. There are some hacky workarounds like wrapping the element in a viewbox with a set width/height and then setting the element to the same width/height, but it's not possible to do on some elements where you don't know the size.

I'm still trying to get the new list to scale according to resolution, but in the meantime that has to be adjusted manually with the font-size. Example...If at 100% Windows scaling you have it set to 32, at 150% scaling you'd have to decrease it. It won't change automatically (for now).

Yeah same.. only one that causes me issues is textlist view what a shame. Thanks for your help.

wish this was a 'theme engine' not a 'grid engine'.

Edited April 26, 2018 by wallmachine

[Grila]

Here are two example files that keep the new listbox font size the same no matter what scale the Windows UI is set to, it utilizes the hacky way I mentioned above. 

TextFiltersView.xaml

TextGamesView.xaml

Examine how I achieved it and you should be able to implement the same into your project.

[wallmachine]

On 4/27/2018 at 12:02 AM, Grila said:

Here are two example files that keep the new listbox font size the same no matter what scale the Windows UI is set to, it utilizes the hacky way I mentioned above. 

TextFiltersView.xaml

TextGamesView.xaml

Examine how I achieved it and you should be able to implement the same into your project.

 unfortunately i cannot get it to work no matter what.

[Grila]

1 hour ago, wallmachine said:

 unfortunately i cannot get it to work no matter what.

OK, nevermind the above two samples and try this updated file...it should handle DPI scaling on its own. Please let me know your results so I can update the downloads page.

ListBoxScrollCenter.dll

[wallmachine]

20 minutes ago, Grila said:

OK, nevermind the above two samples and try this updated file...it should handle DPI scaling on its own. Please let me know your results so I can update the downloads page.

ListBoxScrollCenter.dll

Did you change lbsc:GameList?

[Grila]

Did you unblock the new file?

Working here just by replacing the old file with the new.

Edited April 30, 2018 by Grila

[wallmachine]

On 4/30/2018 at 10:17 PM, Grila said:

Did you unblock the new file?

Working here just by replacing the old file with the new.

I had to restart something wrong with VS.

Below is the result of the new plugin, hope it helps somehow

            <transitions:TransitionPresenter TransitionSelector="{Binding ListTransitionSelector}" Content="{Binding ListView}" Grid.Column="3" Grid.Row="3" Grid.RowSpan="9" />

        <lbsc:GameList Name="Items" FontSize="34">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </lbsc:GameList>

 

 

Edited May 7, 2018 by wallmachine

[Grila]

I see, we are talking about 2 different things. The fix I implemented was for display scaling:

not for changing resolutions. There is no automatic way for changing the font size with different resolutions, but I think you can manually implement a datatrigger based on the canvas dimensions and manually set the font size accordingly. I'll work on an example for you.

[wallmachine]

22 minutes ago, Grila said:

I see, we are talking about 2 different things. The fix I implemented was for display scaling:

not for changing resolutions. There is no automatic way for changing the font size with different resolutions, but I think you can manually implement a datatrigger based on the canvas dimensions and manually set the font size accordingly. I'll work on an example for you.

 

ahk yeah i've had experience before with setting like you done in your previous example and font resizing shame with listview, no idea whats going on doesn't work.

Just wondering with the listbox view before I never had to set a font it would automatically detect it.

<viewbox>

<dockpanel>

<textblock fontsize="34"/>

</dockpanel>

</viewbox>

or

<viewbox>

<canvas>

<control fontsize="34" />

</canvas>

</viewbox>

Edited April 30, 2018 by wallmachine

[Grila]

A quick example for TextListView.xaml (the game list):

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:cal="http://www.caliburnproject.org"
             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
             xmlns:lbsc="clr-namespace:ListBoxScrollCenter;assembly=ListBoxScrollCenter"
             xmlns:x="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <DockPanel Name="RootPanel" Visibility="{Binding ListVisibility}">
        <Image Name="Logo" DockPanel.Dock="Top" Visibility="{Binding LogoVisibility}" RenderOptions.BitmapScalingMode="HighQuality" />
        <TextBlock Name="Title" DockPanel.Dock="Top" Visibility="{Binding TitleVisibility}" FontWeight="Bold" Foreground="White" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" HorizontalAlignment="Stretch" />
        <ListBox Name="Index" Style="{DynamicResource ListBoxStyle}" DockPanel.Dock="Left" Width="70" Visibility="{Binding IndexVisibility}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ListBox>
        
        <!-- OLD LISTBOX -->
        <!--<ListBox Name="Items" Style="{DynamicResource ListBoxStyle}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ListBox>-->
        
        <!-- NEW LISTBOX -->
        <lbsc:GameList>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <cal:ActionMessage MethodName="OnEnter" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <lbsc:GameList.Style>
                <Style TargetType="lbsc:GameList">
                    <Style.Triggers>
                        <!-- 1920x1080 -->
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas, Mode=FindAncestor}}" Value="1920"/>
                                <Condition Binding="{Binding Path=ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas, Mode=FindAncestor}}" Value="1080"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="FontSize" Value="32"/>
                        </MultiDataTrigger>
                        <!-- 1366x768 -->
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas, Mode=FindAncestor}}" Value="1366"/>
                                <Condition Binding="{Binding Path=ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas, Mode=FindAncestor}}" Value="768"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="FontSize" Value="22"/>
                        </MultiDataTrigger>
                        <!-- Add more for each resolution-->
                    </Style.Triggers>
                </Style>
            </lbsc:GameList.Style>
        </lbsc:GameList>
    </DockPanel>
</UserControl>

This grabs the canvas' width and height and sets the font size accordingly. You'll have to play around to figure out what you want the font sizes to be to match your design vision.

And here is the file:

TextListView.xaml

Edited April 30, 2018 by Grila

[wallmachine]

Thanks will try tomorrow got to get to bed.

Would you know why in listbox it would set the font auto? Just trying to understand it better

Edited April 30, 2018 by wallmachine