Jump to content
LaunchBox Community Forums

XAML Tips and Tricks


Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by wallmachine
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by wallmachine
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by wallmachine
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

            <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 by wallmachine
Link to comment
Share on other sites

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

5ae71a1bafe85_Settings4_30_20189_28_28AM.thumb.png.34bfdb48e0385cd88c2020b7aa31837e.pngnot 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.

  • Thanks 1
Link to comment
Share on other sites

22 minutes ago, Grila said:

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

5ae71a1bafe85_Settings4_30_20189_28_28AM.thumb.png.34bfdb48e0385cd88c2020b7aa31837e.pngnot 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 by wallmachine
Link to comment
Share on other sites

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 by Grila
  • Thanks 1
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...