XAML Tips and Tricks

gaialily · March 10, 2021

Wow thank you very much !

Indeed there were the paths defined much above with the old names.

It works now. ??

gaialily · March 15, 2021

Hi, I insist a little because I tried several things but without success.

To do it simple : how to put a fade transition on the background image when changing games ?

The wheelgameview of unified don't do that.

?

Edited March 15, 2021 by gaialily

viking · April 15, 2021

Hi guys !
I'm slowly starting to work on updating my theme and I already have a problem with Visual Studio.

No preview and it tells me "invalid markup". If I do "Show the code" it highlights the point of the arrow for me. (see picture)

I had this problem before, but always with a real error.
Here, no XAML error, even with default theme views, and it's work fine in BigBox.

Any ideas how to fix this?
I dont have the level to work only with notePad ++

Edited April 16, 2021 by viking

xyz0n · April 16, 2021

hi everyone, I'm using a beautiful theme, where unfortunately the arrow for selecting the platforms and games immediately disappears, reappears only when you move the joystick, is there a way to make it always visible? Thank you.

edit. I was wrong in reality everything disappears, both the arrow and the wheel where there are platforms and games.

Edited April 16, 2021 by xyz0n

viking · April 16, 2021

Hi guys !

Back again with my theme crafts!
Today I am blocking on HorizontalListBoxStyle. (in games view, the alphabetical fast access strip)

This is what I want to achieve :

I managed to do everything, but I get stuck on the opacity effect to highlight the selected item.
Basically:

item not selected: opacity = "0.5"
item selected: opacity = "1.0"

It seems simple to me, but I can't do anything!
Ideas ? @Jason Carr @Grila @eatkinola

Here is my my piece of code :

<UserControl.Resources>
        <Style x:Key="HorizontalListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" Background="{TemplateBinding Background}"
						Padding="0" SnapsToDevicePixels="True">
                            <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Stretch"
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            SnapsToDevicePixels="True" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="#5F3399FF" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="#FF3399FF" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bd" Property="Background" Value="#FF3399FF" />
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="HorizontalListBoxStyle" TargetType="ListBox">
            <Setter Property="ItemContainerStyle" Value="{DynamicResource HorizontalListBoxItemStyle}"></Setter>
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="Opacity" Value="0.45" />
            <Setter Property="FontFamily" Value="LAUNCHBOX_ROOT_FOLDER/Themes/Colorful - Light/Colorful_fonts/Gilroy-ExtraBold.otf#Gilroy" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" HorizontalAlignment="Center">
                            <VirtualizingStackPanel.Background>
                                <SolidColorBrush Color="Black" Opacity="0" />
                            </VirtualizingStackPanel.Background>
                        </VirtualizingStackPanel>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
  </UserControl.Resources>


<Canvas Name="Canvas">
  <Grid>
    <Viewbox Grid.Column="2" Grid.ColumnSpan="6" Grid.Row="8" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
       <ListBox Name="Index" Style="{DynamicResource HorizontalListBoxStyle}" Visibility="Visible" />
    </Viewbox>
  </Grid>
</Canvas>

Edited April 16, 2021 by viking

C-Beats · April 16, 2021

Only way to do different opacities for different items in that view (if using a CoverFactory) to my knowledge is an Opacity Mask, and even that isn't exactly what you're looking for though (though you could make it look pretty convincing). The new FlowContext/Template logics let you do that, but at the moment there isn't a way to rotate items like you've shown in your more recent Colorful theme examples.

viking · April 16, 2021

No I don't think it's a CoverFactory. It's the quick acces alphabetical line.
The code I posted is almost the original one, from Default theme. I just did a few modification.

Basically, @Jason Carr's code uses a blue background to highlight the selected item.
I would like to remove this (easy) with an opacity game (hard)

Any ideas ?

C-Beats · April 16, 2021

1 minute ago, viking said:

No I don't think it's a CoverFactory. It's the quick acces alphabetical line.
The code I posted is almost the original one, from Default theme. I just did a few modification.

Basically, @Jason Carr's code uses a blue background to highlight the selected item.
I would like to remove this (easy) with an opacity game (hard)

Any ideas ?

My bad, I read that post as you wanting to do that with the games, not the index. Not tried it but, but looking at the style I'd suggest trying the following (in the ListBoxItemStyle):
Add Opacity property to the border named "Bd". Set the value to the non selected opacity value (.5)
In the trigger section where BOTH triggers are true, set the Opacity there to 1

viking · April 16, 2021

But "Bd" is for the border. For the blue colored text background. Not for the font !

If you have 5 min, can you integrate your idea into the piece of code I posted? Just the area to modify, that I understand your idea!

C-Beats · April 16, 2021

12 minutes ago, viking said:

But "Bd" is for the border. For the blue colored text background. Not for the font !

If you have 5 min, can you integrate your idea into the piece of code I posted? Just the area to modify, that I understand your idea!

Opacity changes for the parent element and all children elements. That text is in that border and so should be affected as well. When I get the time I'll take a look. Can't guarantee it'll be right away though. May have to wait until over the weekend. Trying to get the beta squared away at the moment. Let me know if you get it before then.

viking · April 16, 2021

Thx @C-Beats It will help me a lot!

By following your lead (see code below) I can do the opposite at best.
(all strip full white, except selected item with 0.5 opacity)

It drives me crazy !!! ^^

<ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" Value="1.0" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" Value="0.45" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True" />
                                    <Condition Property="IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" Value="1.0" />
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.45" />
                            </Trigger>
                        </ControlTemplate.Triggers>

Have a nice week end !

Edited April 16, 2021 by viking

C-Beats · April 16, 2021

Only need to set Opacity in the triggers where IsSelected AND selection active is true and onMouseOver. Should be set to 1. Set Opacity to .45 on the actual control template, not by using triggers.

viking · April 26, 2021

A big THX to @faeran who gave me the solution!
It works !

I come back to 2 questions:
Sorry, I'm a bit rusty on the code ^^

#01 New Wheel :

@Jason Carr 's new options are amazing, but I can't seem to make the selected item bigger than the others.
Here is my code. Where is my mistake?

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Grid.Column="0" Grid.ColumnSpan="10" Grid.Row="0" Grid.RowSpan="10"
ImageType="Boxes"
CurveAmount="1" RotationAmount="-14"
VisibleCount="5" PageSize="3" Spacing="2.5" Columns="3"
Endless="true"
ItemZPosition="1.0" SelectedItemZPosition="3.0" >
<coverFlow:FlowControl.CoverFactory>
<coverFlow:HorizontalWheelCoverFactory />
</coverFlow:FlowControl.CoverFactory>
<coverFlow:FlowControl.Camera>
<OrthographicCamera Position="0,-0.3,4" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="7.2" />
</coverFlow:FlowControl.Camera>
<coverFlow:FlowControl.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="50" Direction="270" BlurRadius="90" Color="Black" />
</coverFlow:FlowControl.Effect>
</coverFlow:FlowControl>

Still on the wheel, the "RotationAmount" doesnt change anything after only few degrees. For exemple, if I put 90°, no change. It's normal ?

#02 StarRating :

I had a disk crash and I can't find the info anymore.
I had found in a theme a piece of code to convert the rating (community, or overwhite by personal if entered) into PNG (stars). And that without any plugin or converter.

For the moment, I am there, but it does not work. Ideas ?

RedSnake · April 26, 2021

45 minutes ago, viking said:

A big THX to @faeran who gave me the solution!
It works !

I come back to 2 questions:
Sorry, I'm a bit rusty on the code ^^

#01 New Wheel :

@Jason Carr 's new options are amazing, but I can't seem to make the selected item bigger than the others.
Here is my code. Where is my mistake?

<coverFlow:FlowControl x:Name="FlowControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Grid.Column="0" Grid.ColumnSpan="10" Grid.Row="0" Grid.RowSpan="10"
ImageType="Boxes"
CurveAmount="1" RotationAmount="-14"
VisibleCount="5" PageSize="3" Spacing="2.5" Columns="3"
Endless="true"
ItemZPosition="1.0" SelectedItemZPosition="3.0" >
<coverFlow:FlowControl.CoverFactory>
<coverFlow:HorizontalWheelCoverFactory />
</coverFlow:FlowControl.CoverFactory>
<coverFlow:FlowControl.Camera>
<OrthographicCamera Position="0,-0.3,4" LookDirection="0,0,-1" NearPlaneDistance=".01" FarPlaneDistance="1000" Width="7.2" />
</coverFlow:FlowControl.Camera>
<coverFlow:FlowControl.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="50" Direction="270" BlurRadius="90" Color="Black" />
</coverFlow:FlowControl.Effect>
</coverFlow:FlowControl>

Still on the wheel, the "RotationAmount" doesnt change anything after only few degrees. For exemple, if I put 90°, no change. It's normal ?

#02 StarRating :

I had a disk crash and I can't find the info anymore.
I had found in a theme a piece of code to convert the rating (community, or overwhite by personal if entered) into PNG (stars). And that without any plugin or converter.

For the moment, I am there, but it does not work. Ideas ?

<Image Grid.Column="4" Grid.ColumnSpan="2" Grid.Row="6" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/0.0.png" />
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="0.5" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/0.5.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="1.0" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/1.0.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="1.5" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/1.5.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="2.0" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/2.0.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="2.5" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/2.5.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="3.0" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/3.0.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="3.5" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/3.5.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="4.0" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/4.0.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="4.5" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/4.5.png" />
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGame.StarRating}" Value="5.0" >
<Setter Property="Source" Value="pack://siteoforigin:,,,/Themes/Colorful - Light/Colorful_img/white_stars/5.0.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>

Hi,

The problem with the ZDistance, I suspect it comes from the OrthographicCamera you are using.

If I am correct, perspective are not rendered with this kind of camera, thus rendering Z (if Z indicates coordinates in the Z plane that is) information useless.

For the star rating, I am using following code:

<Grid rs:GridHelper.GridColumns="2*,5*">
                   <Image Source="{Binding Text, ElementName=Stars}" DockPanel.Dock="Left" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="left" VerticalAlignment="Center" Margin="10,10,0,0">
                       <Image.Effect>
                           <DropShadowEffect Color="LightGray" BlurRadius="30" Opacity="1" Direction="270" ShadowDepth="2"/>
                       </Image.Effect>
                   </Image>
               </Grid>

With ElementName=Stars defined as a TextBlock as such:

Edited April 26, 2021 by RedSnake

viking · April 26, 2021

THX @RedSnake ! it's works !

ABOUT THE WHEEL :

OK I understand. It makes sense with an ortho camera.
But how to do it ? Do I have to cheat or is there a "clean" method? @Jason Carr ?
See code above. To have the selected item larger than the others.

C-Beats · April 26, 2021

52 minutes ago, viking said:

THX @RedSnake ! it's works !

ABOUT THE WHEEL :

OK I understand. It makes sense with an ortho camera.
But how to do it ? Do I have to cheat or is there a "clean" method? @Jason Carr ?
See code above. To have the selected item larger than the others.

Check out the new Theme documentation. The FlowControl property you are looking for is SelectedScale.

viking · April 26, 2021

Thx @C-Beats
Of course I read Jason's doc. But these settings have no effect on my wheel. No matter how much value I give them.

I try SelectedScale and ItemSpacing, but no effect ! =/

C-Beats · April 26, 2021

Let me check. It may be because you are using a CoverFactory. If you don't have the desire for rotation amount you may need to switch to the new FlowContext/Template syntax.

Jason Carr · April 28, 2021

Hey all, @faeran put this out and it's tremendously helpful and informative:

mememinister · April 30, 2021

Hey everybody,

I responded to this forum a few months ago asking some questions around the WallView, and, with the recent updates to WallView, everything that I wanted to do in that original post is possible now. So I just wanted to give a big thanks to the constant improvements the LaunchBox team is making. I've been using LB/BB for years, and with the consistent updates I'm fairly certain I'll be using it for years to come.

PS. if this post is off-topic don't hesitate to delete it

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