Jump to content
LaunchBox Community Forums

Upgrade your custom LaunchBox theme to support the Sync Status Icon (LaunchBox 13.3 and above)

faeran

By faeran
in Custom Theme Tutorials

 Share

Recommended Posts

faeran 128-Bit Self Aware

faeran

Posted
Posted

If you have built yourself a custom LaunchBox theme and want to include support for the new Sync Status Icon that was released with version 13.3, you can do the following.

Open up your theme's MainView.xaml file.

Make sure you have the following namespace added: 

xmlns:controls="clr-namespace:Unbroken.LaunchBox.Windows.Controls;assembly=Unbroken.LaunchBox.Windows"

 

Here's the code for the sync status icon. Add it to a place you want it to be in your theme. I've added comments to better explain each section just in case you would like to customize it:

Spoiler 
            <Grid>
                <Grid.Style>
                    <Style TargetType="Grid">
                        <!-- SETS THE BACKGROUND COLOR -->
                        <Setter Property="Background" Value="#00FFFFFF"/>
                        <Setter Property="Visibility" Value="Visible"/>
                        <Style.Triggers>
                            <!-- THIS TRIGGER DETERMINES BACKGROUND COLOR ON MOUSEOVER -->
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding ElementName=CloudRectangle, Path=IsMouseOver}" Value="True"/>
                                    <Condition Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="OutOfSync"/>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Background" Value="#33FFFFFF"/>
                            </MultiDataTrigger>
                            <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="Disabled">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <!-- THE ICON -->
                <controls:CloudSyncIndicator x:Name="CloudIndicator" Height="10" Width="10" Margin="10,0,10,0">
                    <Grid>
                        <Grid.Effect>
                            <DropShadowEffect ShadowDepth="1" Direction="315" Color="Black" Opacity="0.9" BlurRadius="2" />
                        </Grid.Effect>
                        <coverFlow:FlowImage x:Name="CloudStatus" Opacity="0.8" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                            <coverFlow:FlowImage.Style>
                                <Style TargetType="coverFlow:FlowImage">
                                    <!-- WHAT THE ICON WILL LOOK LIKE WHEN IN SYNC. THIS CAN BE SWITCHED OUT WITH YOUR OWN PNG -->
                                    <Setter Property="ImagePath" Value="pack://application:,,,/WpfResources/CloudInSync.png" />
                                    <Setter Property="LoadImage" Value="True"/>
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="0"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="Syncing">
                                            <Setter Property="LoadImage" Value="False"/>
                                        </DataTrigger>
                                        <!-- WHAT THE ICON WILL LOOK LIKE WHEN OUT OF SYNC. THIS CAN BE SWITCHED OUT WITH YOUR OWN PNG -->
                                        <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="OutOfSync">
                                            <Setter Property="ImagePath" Value="pack://application:,,,/WpfResources/CloudOutOfSync.png" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="Disabled">
                                            <Setter Property="LoadImage" Value="False"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </coverFlow:FlowImage.Style>
                        </coverFlow:FlowImage>
                        <Rectangle x:Name="CloudRectangle">
                            <Rectangle.Style>
                                <Style TargetType="Rectangle">
                                    <!-- SETS THE COLOR OF THE INSYNC ICON -->
                                    <Setter Property="Fill" Value="#29C44D"/>
                                    <Setter Property="Opacity" Value="0"/>
                                    <Style.Triggers>
                                        <!-- ANIMATION FOR HOW LONG THE COLOR LASTS AFTER SYNC -->
                                        <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="InSync">
                                            <DataTrigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="1.0" To="0" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </DataTrigger.EnterActions>
                                            <DataTrigger.ExitActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" To="1.0" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </DataTrigger.ExitActions>
                                        </DataTrigger>
                                        <!-- SETS THE COLOR OF THE OUT OF SYNC ICON -->
                                        <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="OutOfSync">
                                            <Setter Property="Fill" Value="#FDB404" />
                                            <Setter Property="Opacity" Value="1.0"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Rectangle.Style>
                            <Rectangle.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=CloudStatus}" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                        <!-- WHAT THE ICON WILL LOOK LIKE WHEN SYNC IS IN PROGRESS. THIS CAN BE SWITCHED OUT WITH YOUR OWN PNG -->
                        <coverFlow:FlowImage x:Name="Loading" Opacity="0.8" ImagePath="pack://application:,,,/WpfResources/CloudSyncing.png" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                            <coverFlow:FlowImage.Style>
                                <Style TargetType="coverFlow:FlowImage">
                                    <Setter Property="LoadImage" Value="False"/>
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <RotateTransform Angle="0"/>
                                        </Setter.Value>
                                    </Setter>
                                    <Style.Triggers>
                                        <EventTrigger RoutedEvent="Loaded">
                                            <!-- THE ROTATING ANIMATION OF THE SYNC IN PROGRESS ICON -->
                                            <BeginStoryboard x:Name="LoadingRotation">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)" From="0" To="359" Duration="0:0:1" RepeatBehavior="Forever" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                        <DataTrigger Binding="{Binding ElementName=CloudIndicator, Path=SyncState}" Value="Syncing">
                                            <Setter Property="LoadImage" Value="True"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </coverFlow:FlowImage.Style>
                        </coverFlow:FlowImage>
                    </Grid>
                </controls:CloudSyncIndicator>
            </Grid>

 

 

  • Thanks 3
Link to comment
Share on other sites
bundangdon 128-Bit Self Aware

bundangdon

Posted
Posted

@faeran thanks a lot for sharing this, but I can't seem to get it working. I've tried pasting the code in a few different areas of the "MainView" xml file but it keeps giving a very similar error:

---------------------------

---------------------------
An error occurred while parsing the custom MainView. The default view is shown instead. Details on the error are below:

System.Windows.Markup.XamlParseException: 'coverFlow' is an undeclared prefix. Line 64, position 26.
 ---> System.Xml.XmlException: 'coverFlow' is an undeclared prefix. Line 64, position 26.
   at System.Xml.XmlTextReaderImpl.Throw(Exception e)
   at System.Xml.XmlTextReaderImpl.Throw(String res, String arg, Int32 lineNo, Int32 linePos)
   at System.Xml.XmlTextReaderImpl.LookupNamespace(NodeData node)
   at System.Xml.XmlTextReaderImpl.ElementNamespaceLookup()
   at System.Xml.XmlTextReaderImpl.ParseAttributes()
   at System.Xml.XmlTextReaderImpl.ParseElement()
   at System.Xml.XmlTextReaderImpl.ParseElementContent()
   at System.Xaml.XmlCompatibilityReader.Read()
   at MS.Internal.Xaml.Parser.XamlScanner.DoXmlRead()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_NonemptyPropertyElement()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_PropertyElement()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementBody()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_Element()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementContent()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementBody()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_Element()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementContent()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementBody()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_Element()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementContent()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_ElementBody()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.P_Element()+MoveNext()
   at MS.Internal.Xaml.Parser.XamlPullParser.Parse()+MoveNext()
   at MS.Internal.Xaml.NodeStreamSorter.MoveNext()
   at System.Xaml.XamlXmlReader.Read()
   at System.Windows.Markup.WpfXamlLoader.TransformNodes(XamlReader xamlReader, XamlObjectWriter xamlWriter, Boolean onlyLoadOneNode, Boolean skipJournaledProperties, Boolean shouldPassLineNumberInfo, IXamlLineInfo xamlLineInfo, IXamlLineInfoConsumer xamlLineInfoConsumer, XamlContextStack`1 stack, IStyleConnector styleConnector)
   at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri)
   --- End of inner exception stack trace ---
   at System.Windows.Markup.XamlReader.RewrapException(Exception e, IXamlLineInfo lineInfo, Uri baseUri)
   at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri)
   at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, Boolean skipJournaledProperties, Uri baseUri)
   at System.Windows.Markup.XamlReader.Load(XamlReader xamlReader, ParserContext parserContext)
   at System.Windows.Markup.XamlReader.Load(XmlReader reader, ParserContext parserContext, XamlParseMode parseMode, Boolean useRestrictiveXamlReader, List`1 safeTypes)
   at System.Windows.Markup.XamlReader.Load(Stream stream, ParserContext parserContext, Boolean useRestrictiveXamlReader)
   at System.Windows.Markup.XamlReader.Load(Stream stream)
   at Unbroken.LaunchBox.Windows.Desktop.Bootstrapper.LoginIterableExporter(Object )
   at Unbroken.LaunchBox.Windows.Desktop.Bootstrapper.ReadFailureField(Object reference)
   at ServiceContext.ListIterableDefinition(String reference, ServiceContext )
   at Unbroken.LaunchBox.Windows.Desktop.Bootstrapper.StartFailureField(Type param)
---------------------------
OK   
---------------------------
Any ideas how I could fix this?

Link to comment
Share on other sites
bundangdon 128-Bit Self Aware

bundangdon

Posted
Posted
2 hours ago, C-Beats said:

@bundangdon add the following to the top header area of the MainView file. 

xmlns:coverFlow="clr-namespace:Unbroken.LaunchBox.Windows.Controls.CoverFlow;assembly=Unbroken.LaunchBox.Windows"

 

Okay, that cleaned up the errors and it works. But there's a weird issue that popped up after changing the theme. When you try to change to or from another LB theme with this theme (LBPlex 2023), LaunchBox freezes up and only CTRL-ALT-DEL can close everything. Here's the MainView file (attached)

MainView.xaml

 

Link to comment
Share on other sites
faeran 128-Bit Self Aware

faeran

Posted
  • Author
Posted
On 4/22/2023 at 2:08 AM, bundangdon said:

Okay, that cleaned up the errors and it works. But there's a weird issue that popped up after changing the theme. When you try to change to or from another LB theme with this theme (LBPlex 2023), LaunchBox freezes up and only CTRL-ALT-DEL can close everything. Here's the MainView file (attached)

MainView.xaml 34.01 kB · 0 downloads

 

I took your MainView.xaml file and applied it to the theme but I'm not getting the same freeze you are. It's possible it's not a freeze caused by the theme, or that there's another change not present in this MainView.xaml file.

More often than not theme changes won't freeze LaunchBox, but will present you with a theme error and fallback to the default.

Link to comment
Share on other sites
bundangdon 128-Bit Self Aware

bundangdon

Posted
Posted
On 4/24/2023 at 10:03 PM, faeran said:

I took your MainView.xaml file and applied it to the theme but I'm not getting the same freeze you are. It's possible it's not a freeze caused by the theme, or that there's another change not present in this MainView.xaml file.

More often than not theme changes won't freeze LaunchBox, but will present you with a theme error and fallback to the default.

Okay, thanks a lot for checking. Going forward, I'll keep an eye on it, but that's certainly not a major issue and may be more of an isolated error than anything else.

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.

×
 Share
Go to topic listing
×
×
  • Create New...