[XAML Tips and Tricks]

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?

[XAML Tips and Tricks]

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

[XAML Tips and Tricks]

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.

[XAML Tips and Tricks]

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

[XAML Tips and Tricks]

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

[XAML Tips and Tricks]

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.

[XAML Tips and Tricks]

Did you unblock the new file?

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

[XAML Tips and Tricks]

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

[XAML Tips and Tricks]

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.

[XAML Tips and Tricks]

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

[XAML Tips and Tricks]

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.

[XAML Tips and Tricks]

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.

[XAML Tips and Tricks]

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.

[ListBox Scroll Center for BigBox]

ListBox Scroll Center for BigBox

View File

---

This control will make the selected item in the list views stay in the center of the list as the user scrolls if the list is indeed scrollable according to the IScrollInfo.

Please read the included docs and view the example pictures for each step! If you are inserting this into a theme where the author has modified any of the required views, make sure to only replace whats outlined in the docs.

Any troubles implementing it let me know and I will make the modifications when I have time.

Major thanks to @Jason Carr for holding my hand on this one

---

• Submitter
  Grila
• Submitted
  04/25/2018
• Category
  Third-party Apps and Plugins

 

[Centered Listbox Selection]

Almost ready for release, just writing some documentation up now. Here's a quick video of it in action in @faeran's awesome CoverBox SNES theme:

 

[Centered Listbox Selection]

6 hours ago, wallmachine said:

@Grila will it allow us to add a dot or some other representation? example.

 

You can already do that with the current listbox. You have to get creative with the ListBoxItemStyle.xaml.

Examples done in 10 seconds:

[Centered Listbox Selection]

That's a whole different beast. The text list views, at the core, are just plain old Windows listboxes styled in a way so they don't look like plain old Windows listboxes. There's no looping behavior. The wheels and coverflows are custom coded and loop their contents endlessly. 

[Centered Listbox Selection]

No, it will never start in the middle. No front end I've ever used (EmulationStation, RetroFE, Attract Mode) have ever started their list in the middle. It starts at index 0, scrolls to the center, stays there until nearing index Nan, then scrolls to the bottom.

If it started in the middle, and you were at index 0, then the whole top of the list would be blank...doesn't make sense.

[Centered Listbox Selection]

User control, so the dll will have to go in the theme's plugin directory, then the code added to the corresponding view. It's a minor change, so it shouldn't be that difficult for most.

[Centered Listbox Selection]

I've seen quite a few people request this before so I started working on it. It's not totally complete yet and I am still trying to figure a few minor things out, but here's a preview of it in action. The video has a little lag from recording, but rest assured the scrolling is butter smooth in real time. Oh, and you can set the font size in this one

 

[XAML Tips and Tricks]

6 minutes ago, wallmachine said:

note to self don't change shit i don't know.

[XAML Tips and Tricks]

5 hours ago, wallmachine said:

@Grila I'm guessing i'll need a total new plugin for the following? i tried replacing your code with https://msdn.microsoft.com/en-us/library/system.windows.data.imultivalueconverter.aspx but it just keeps crashing bigbox any ideas? Said object[] value can't be a string.

 

 

 

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>

[XAML Tips and Tricks]

You almost got it, you made a .NET Standard Class Library though...it needs to be a .NET Framework Class Library (I usually target 4.7 since that's what BigBox uses currently).

Include these 3 directives at the top:

using System;
using System.Globalization;
using System.Windows.Data;

Good effort...you're almost there!

 

EDIT:

I forgot to mention to add a reference to PresentationFramework.dll. That's why you're getting the error about the IValueConverter. 

[XAML Tips and Tricks]

1 hour ago, wallmachine said:

Also anyway to make text that is not uppercase, uppercase?

Typography.Capitals does not work

Not without a plugin, you have to use a converter. Here's the code I use:

public class TextTransformUppercase : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null && value is string)
            {
                return ((string)value).ToUpper();
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

 

[XAML Tips and Tricks]

@viking @Rincewind I just noticed my previous solution doesn't respect the transitions, so here is another way to do it that will utilize the transitions. Sorry about that.

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

It basically does the same thing, you just have to adjust the margin for aligning the video. So in this example, the video margin is set to center the video in the right column. To align it left, set the margin to "0,0,0,0" and to align it right set it to "-960,0,0,0"

Here are the two example files for you to examine...

PlatformWheel1FiltersView.xaml

WheelGamesView.xaml