This project is read-only.

Best way to modify mui styles

Feb 5, 2014 at 3:01 PM
I want to make small adjustment to the mui styles without modifying them.

If I want to base my styles on existing styles then I have to give them a key, don't I?

mui modified with a key
<Style x:Key="TextBoxBaseStyle" TargetType="{x:Type TextBoxBase}" BasedOn="{x:Null}">

My style
<Style x:Key="{x:Type TextBoxBase}" TargetType="{x:Type TextBoxBase}" BasedOn="{StaticResource TextBoxBaseStyle}">

Is there a way to avoid breaking into the source, so I can use the assemblies instead?
Feb 11, 2014 at 3:39 PM
You should be able to override the default styles by just adding them to your App.xaml. Make sure you use the same x:Key as in the mui styles and your custom styled will be implicitly applied to the controls
Feb 12, 2014 at 7:48 PM
I Think that it's very cool that the user can choose between the dark and light theme.
And I would like to thank you for sharing you code. I think that this is the only open source project that shows you how to create a full skin and switch between skins.

So how should I organize my custom styles to keep using the light and dark theme?
Feb 12, 2014 at 7:53 PM
See Creating a custom theme in the documentation. Also, you probably want to check the source code of the demo app which uses multiple themes.
Feb 14, 2014 at 1:18 PM
I have followed the tutorial "Creating a custom theme" but if add my own theme then I am unable to switch theme
I get this error:
System.NullReferenceException was unhandled by user code
  HResult=-2147467261
  Message=Object reference not set to an instance of an object.
  Source=ModernUIApp1
  StackTrace:
       at ModernUIApp1.Content.SettingsAppearanceViewModel.set_SelectedTheme(Link value) in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 118
       at ModernUIApp1.Content.SettingsAppearanceViewModel.SyncThemeAndColor() in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 78
       at ModernUIApp1.Content.SettingsAppearanceViewModel.OnAppearanceManagerPropertyChanged(Object sender, PropertyChangedEventArgs e) in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 88
       at System.ComponentModel.PropertyChangedEventHandler.Invoke(Object sender, PropertyChangedEventArgs e)
       at FirstFloor.ModernUI.Presentation.NotifyPropertyChanged.OnPropertyChanged(String propertyName)
       at FirstFloor.ModernUI.Presentation.AppearanceManager.SetThemeSource(Uri source, Boolean useThemeAccentColor)
       at FirstFloor.ModernUI.Presentation.AppearanceManager.set_ThemeSource(Uri value)
       at ModernUIApp1.Content.SettingsAppearanceViewModel.set_SelectedTheme(Link value) in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 118
       at ModernUIApp1.Content.SettingsAppearanceViewModel.SyncThemeAndColor() in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 78
       at ModernUIApp1.Content.SettingsAppearanceViewModel.OnAppearanceManagerPropertyChanged(Object sender, PropertyChangedEventArgs e) in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 88
       at System.ComponentModel.PropertyChangedEventHandler.Invoke(Object sender, PropertyChangedEventArgs e)
       at FirstFloor.ModernUI.Presentation.NotifyPropertyChanged.OnPropertyChanged(String propertyName)
       at FirstFloor.ModernUI.Presentation.AppearanceManager.SetThemeSource(Uri source, Boolean useThemeAccentColor)
       at FirstFloor.ModernUI.Presentation.AppearanceManager.set_ThemeSource(Uri value)
       at ModernUIApp1.Content.SettingsAppearanceViewModel.set_SelectedTheme(Link value) in c:\Projects\ModernUIApp1\ModernUIApp1\Content\SettingsAppearanceViewModel.cs:line 118
  InnerException: 
 <!-- derive from Light or Dark theme-->
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- specify the accent color (optional) -->
    <Color x:Key="AccentColor">#60a917</Color>

    <!-- custom theme resources-->
    <Rectangle x:Key="WindowBackgroundContent" x:Shared="false">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0,1" Opacity=".2">
                <GradientStop Offset="0" Color="Transparent" />
                <GradientStop Offset="1" Color="{DynamicResource AccentColor}" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
App.xaml:
<ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
                <ResourceDictionary Source="/ModernUIApp1;component/Assets/ModernUI.MyDarkTheme.xaml" />
                <ResourceDictionary Source="/ModernUIApp1;component/Assets/ModernUI.MyLightTheme.xaml" />
            </ResourceDictionary.MergedDictionaries>
Feb 14, 2014 at 1:42 PM
You shouldn't add all themes to App.xaml, the last one will be used. You need to add those theme links to the SettingsAppearanceViewModel (as is done in the sample app)
Feb 14, 2014 at 2:14 PM
Sorry I just don't get it.
This is the code for the light theme in app.xaml
<ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
     <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
     <ResourceDictionary Source="/ModernUIApp1;component/Assets/ModernUI.MyLightTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
And it' works. If I want to change the theme to dark, then I guess that I have to modify this;
this.themes.Add(new Link { DisplayName = "dark", Source = AppearanceManager.DarkThemeSource });
this.themes.Add(new Link { DisplayName = "light", Source = AppearanceManager.LightThemeSource });
to this:
this.themes.Add(new Link { DisplayName = "dark", Source = MyDarkThemeSource });
this.themes.Add(new Link { DisplayName = "light", Source = MyLightThemeSource });
Is this correct?
Feb 14, 2014 at 2:17 PM
That is correct. You can remove the ModernUI.Light.xaml reference from App.xaml as well. It's overwritten with your MyLightTheme.xaml.

Make sure the MyDarkThemeSource and MyLightThemeSource do contain the correct values.
Feb 19, 2014 at 3:56 PM
Edited Feb 19, 2014 at 4:45 PM
I have deleted this post