Skip to content

Custom UI Elements

Jump to bottom
felixkmh edited this page Aug 14, 2022 · 9 revisions

Controls Overview

Available custom elements:

Star Ratings

grafik

Only ThemeExtras_UserRating is interactive.

Example:

<StackPanel Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}">
    <StackPanel.Resources>
        <SolidColorBrush x:Key="Extras_FilledStarBrush" Color="White"/>
        <SolidColorBrush x:Key="Extras_EmptyStarBrush" Color="White" Opacity="0.5"/>
    </StackPanel.Resources>
    <ContentControl x:Name="ThemeExtras_UserRating" Visibility="{Binding UserScoreVisibility}"/>
    <ContentControl x:Name="ThemeExtras_CriticRating" Visibility="{Binding CriticScoreVisibility}"/>
    <ContentControl x:Name="ThemeExtras_CommunityRating" Visibility="{Binding CommunityScoreVisibility}"/>
</StackPanel>

Banners

grafik

Example:

<ContentControl x:Name="ThemeExtras_Banner"
                Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}"
                RenderOptions.BitmapScalingMode="Fant"/>

Links

grafik

ThemeExtras_Links contains a ItemsControl that can styled by providing an implicit style as a resource of the ContentControl. The ItemsSource is bound to a List<LinkExt>. LinkExt extends Link by the Icon property and the OpenLinkCommand.

Example:

<ContentControl x:Name="ThemeExtras_Links"
                Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}">
    <ContentControl.Resources>
        <Style TargetType="ItemsControl">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <DockPanel Margin="5">
                            <Viewbox DockPanel.Dock="Left" Margin="0,0,5,0" Width="18" Height="18">
                                <ContentControl>
                                    <ContentControl.Content>
                                        <Binding Path="Icon">
                                            <Binding.TargetNullValue>
                                                <TextBlock Text="&#xEF71;" 
                                                           Style="{DynamicResource BaseTextBlockStyle}" 
                                                           FontFamily="{StaticResource FontIcoFont}"/>
                                            </Binding.TargetNullValue>
                                        </Binding>
                                    </ContentControl.Content>
                                </ContentControl>
                            </Viewbox>
                            <TextBlock DockPanel.Dock="Left" 
                                       VerticalAlignment="Center" 
                                       TextTrimming="CharacterEllipsis"
                                       ToolTip="{Binding Url}">
                                <Hyperlink Command="{Binding OpenLinkCommand}">
                                    <Run Text="{Binding Name}"/>
                                </Hyperlink>    
                            </TextBlock>
                        </DockPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentControl.Resources>
</ContentControl>

Drop-in Completion Status control

An already styled ComboBox with animations. Contribution by Jhanlon95.

Example:

<ContentControl x:Name="ThemeExtras_CompletionStatusComboBox"/>

Settable Properties

Settable properties allow to change certain game properties and update the game accordingly such that the change persists. The ContentControls only contain an empty UserControl with a special DataContext. Every DataContext of such a UserControl has the Value property that can be bound in TwoWay-mode to allow changing it.

Examples:

User Rating

<ContentControl x:Name="ThemeExtras_SettableUserScore"
                Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}">
    <ContentControl.Resources>
        <Style TargetType="{x:Type UserControl}">
            <Setter Property="Content">
                <Setter.Value>
                    <NullIntNumericBox Width="30" TextAlignment="Center" 
                                       Text="{Binding Value, UpdateSourceTrigger=LostFocus}"
                                       Tag="{Binding Game.UserScoreRating}"
                                       FontSize="{DynamicResource FontSizeLarge}"
                                       FontWeight="SemiBold" VerticalAlignment="Center"
                                       MinValue="0" MaxValue="100"/>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentControl.Resources>
</ContentControl>

Favorite

grafik

<ContentControl x:Name="ThemeExtras_SettableFavorite"
                Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}">
    <ContentControl.Resources>
        <Style TargetType="UserControl">
            <Setter Property="Content">
                <Setter.Value>
                    <CheckBox IsChecked="{Binding Value}">
                        <CheckBox.Template>
                            <ControlTemplate TargetType="CheckBox">
                                <Viewbox>
                                    <Grid>
                                        <TextBlock Text="&#xF000;" 
                                                    FontFamily="{StaticResource FontIcoFont}" 
                                                    Opacity="{TemplateBinding IsChecked, Converter={StaticResource OpacityBoolConverter}}"/>
                                    </Grid>
                                </Viewbox>
                            </ControlTemplate>
                        </CheckBox.Template>
                    </CheckBox>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentControl.Resources>
</ContentControl>

Hidden

grafik

<ContentControl x:Name="ThemeExtras_SettableHidden"
                Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}">
    <ContentControl.Resources>
        <Style TargetType="UserControl">
            <Setter Property="Content">
                <Setter.Value>
                    <CheckBox IsChecked="{Binding Value}">
                        <CheckBox.Template>
                            <ControlTemplate TargetType="CheckBox">
                                <Viewbox>
                                    <Grid>
                                        <TextBlock Text="&#xEF24;" FontFamily="{StaticResource FontIcoFont}" 
                                                    Visibility="{TemplateBinding IsChecked, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"/>
                                        <TextBlock Text="&#xEF22;" FontFamily="{StaticResource FontIcoFont}" 
                                                    Visibility="{TemplateBinding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                                    </Grid>
                                </Viewbox>
                            </ControlTemplate>
                        </CheckBox.Template>
                    </CheckBox>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentControl.Resources>
</ContentControl>

Completion Status

grafik

The DataContext for this control also has the CompletionStatusOptions properties which is an ObservableCollection<CompletionStatus> which contains all available completion statuses.

<ContentControl Margin="0,6,0,0"
                Visibility="{PluginStatus Plugin=felixkmh_Extras_Plugin, Status=Installed}"
                HorizontalAlignment="Left"
                Height="40"
                Padding="5"
                x:Name="ThemeExtras_SettableCompletionStatus">
    <ContentControl.Resources>
        <Style TargetType="UserControl">
            <Setter Property="Content">
                <Setter.Value>
                    <StackPanel Orientation="Horizontal">
                        <Grid>
                            <Viewbox>
                                <TextBlock Text="&#xEED8;" FontFamily="{StaticResource FontIcoFont}" 
                                            Style="{StaticResource BaseTextBlockStyle}" HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
                            </Viewbox>
                        </Grid>
                        <Border Padding="5,0" 
                                Background="Transparent">
                            <ComboBox ItemsSource="{Binding CompletionStatusOptions}" SelectedItem="{Binding Value}">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate DataType="{x:Type CompletionStatus}">
                                        <TextBlock Text="{Binding Name}"/>
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                        </Border>
                    </StackPanel>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentControl.Resources>
</ContentControl>
Clone this wiki locally