Black window trying to use any Metro theme

Jul 14, 2014 at 3:04 PM
Hello,

I am trying to use the Fluent Ribbon with a Metro theme, but it does not seem to work for me. If I use this resource:
<ResourceDictionary Source="/Fluent;Component/Themes/Metro/White.xaml" />
I do not get any errors but the whole window content is black. If I use this resource:
<ResourceDictionary Source="/Fluent;Component/Themes/Metro/Generic.xaml" />
which matches the resource used in the most recent FluentTest app, it tells me it cannot find the resource. Also, if I load the FluentTest app and open up the TestWindowOffice2013.xaml file, it immediately gives me the error:

Exception: An error occurred while finding the resource dictionary "/Fluent;Component/Themes/Metro/Generic.xaml".

This is the same error I get on my application as well.

Here is my code currently. Maybe I am missing something. Thank you for your help.

App.xaml
<Application x:Class="TestApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views\ControlWindow.xaml">
    <Application.Resources>
    </Application.Resources>
</Application>
ControlWindow.xaml
<Fluent:MetroWindow x:Class="TestApp.Views.ControlWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
        Title="Test App" Height="545.522" Width="926.493" WindowState="Maximized">
    <Fluent:MetroWindow.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Fluent;Component/Themes/Metro/White.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <!--<Style x:Key="unused" />-->
        </ResourceDictionary>
    </Fluent:MetroWindow.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Fluent:Ribbon Name="MainRibbon">
            <Fluent:Ribbon.Menu>
                <Fluent:Backstage Header="File" Background="#FFFD8208" Foreground="Black">
                    <Fluent:BackstageTabControl>
                        <Fluent:BackstageTabItem Header="Info">

                        </Fluent:BackstageTabItem>
                        <Fluent:BackstageTabItem Header="New">

                        </Fluent:BackstageTabItem>
                        <Fluent:BackstageTabItem Header="Open">

                        </Fluent:BackstageTabItem>
                    </Fluent:BackstageTabControl>
                </Fluent:Backstage>
            </Fluent:Ribbon.Menu>
            <Fluent:RibbonTabItem Header="Home">

            </Fluent:RibbonTabItem>
            <Fluent:RibbonTabItem Header="Edit">

            </Fluent:RibbonTabItem>
            <Fluent:RibbonTabItem Header="Insert">

            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="2">
                    <ListBox>
                        
                    </ListBox>
                    <ListBox>

                    </ListBox>
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</Fluent:MetroWindow>
Developer
Jul 14, 2014 at 7:22 PM
I can't see any problems using the latest source version.
But you are still referencing White.xaml in your application.
Jul 15, 2014 at 2:16 PM
Edited Jul 15, 2014 at 2:19 PM
Hi Batzen,

Yeah, I left it as White.xaml for the code above, which gives no error but the whole client area is black. If I use Themes/Metro/Generic.xaml, I get this error:

Exception: An error occurred while finding the resource dictionary "/Fluent;Component/Themes/Metro/Generic.xaml".

I have a couple questions that might clear it up.

There is a Fluent.xml file along with the dll. Does that XML file need to go somewhere or is that file not needed? It looks like it describes the methods and events inside the dll.

There is also a System.Windows.Interactivity.dll library as well. Does that need to go anywhere? If I put that dll in my project folder and add it as a reference, nothing happens.

I looked through the source code, and I do not see Themes/Metro/White.xaml in there at all, yet my code seems to think it exists. I'm using the most recent source code.

Thanks for your help with this.
~ Joe
Developer
Jul 23, 2014 at 9:58 PM
The Fluent.xml file is optional.
System.Windows.Interactivity.dll is required for some things to work.

Are you sure that you are using the latest source version and compiled it yourself?
The currently available download and nuget package are not built from the latest source version (but will be in september).
Jul 30, 2014 at 6:30 AM
I definitely used the latest source version, and I compiled it myself using the Release Configuration. I then copied and pasted the compiled dll into my project under a Lib folder, and referenced that dll in my project. My code is the same as it was in my first post, so I am unsure what I am doing wrong. Here is my csproj file as well, in case that helps.

Thanks again for all your help.
~ Joe
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
    <ProjectGuid>{1D555ED4-277F-4CA2-9559-0B4C14FCA453}</ProjectGuid>
    <OutputType>WinExe</OutputType>
    <AppDesignerFolder>Properties</AppDesignerFolder>
    <RootNamespace>TestApp</RootNamespace>
    <AssemblyName>TestApp</AssemblyName>
    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
    <FileAlignment>512</FileAlignment>
    <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>
    <WarningLevel>4</WarningLevel>
    <IsWebBootstrapper>false</IsWebBootstrapper>
    <PublishUrl>publish\</PublishUrl>
    <Install>true</Install>
    <InstallFrom>Disk</InstallFrom>
    <UpdateEnabled>false</UpdateEnabled>
    <UpdateMode>Foreground</UpdateMode>
    <UpdateInterval>7</UpdateInterval>
    <UpdateIntervalUnits>Days</UpdateIntervalUnits>
    <UpdatePeriodically>false</UpdatePeriodically>
    <UpdateRequired>false</UpdateRequired>
    <MapFileExtensions>true</MapFileExtensions>
    <ApplicationRevision>0</ApplicationRevision>
    <ApplicationVersion>1.0.0.%2a</ApplicationVersion>
    <UseApplicationTrust>false</UseApplicationTrust>
    <BootstrapperEnabled>true</BootstrapperEnabled>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
    <PlatformTarget>AnyCPU</PlatformTarget>
    <DebugSymbols>true</DebugSymbols>
    <DebugType>full</DebugType>
    <Optimize>false</Optimize>
    <OutputPath>bin\Debug\</OutputPath>
    <DefineConstants>DEBUG;TRACE</DefineConstants>
    <ErrorReport>prompt</ErrorReport>
    <WarningLevel>4</WarningLevel>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
    <PlatformTarget>AnyCPU</PlatformTarget>
    <DebugType>pdbonly</DebugType>
    <Optimize>true</Optimize>
    <OutputPath>bin\Release\</OutputPath>
    <DefineConstants>TRACE</DefineConstants>
    <ErrorReport>prompt</ErrorReport>
    <WarningLevel>4</WarningLevel>
  </PropertyGroup>
  <PropertyGroup>
    <StartupObject>TestApp.App</StartupObject>
  </PropertyGroup>
  <ItemGroup>
    <Reference Include="Fluent, Version=2.1.0.0, Culture=neutral, PublicKeyToken=3e436e32a8c5546f, processorArchitecture=MSIL">
      <SpecificVersion>False</SpecificVersion>
      <HintPath>lib\Fluent.dll</HintPath>
    </Reference>
    <Reference Include="System" />
    <Reference Include="System.Data" />
    <Reference Include="System.Drawing" />
    <Reference Include="System.Windows.Forms" />
    <Reference Include="System.Windows.Interactivity, Version=4.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
      <SpecificVersion>False</SpecificVersion>
      <HintPath>lib\System.Windows.Interactivity.dll</HintPath>
    </Reference>
    <Reference Include="System.Xml" />
    <Reference Include="Microsoft.CSharp" />
    <Reference Include="System.Core" />
    <Reference Include="System.Xml.Linq" />
    <Reference Include="System.Data.DataSetExtensions" />
    <Reference Include="System.Xaml">
      <RequiredTargetFramework>4.0</RequiredTargetFramework>
    </Reference>
    <Reference Include="UIAutomationProvider" />
    <Reference Include="UIAutomationTypes" />
    <Reference Include="WindowsBase" />
    <Reference Include="PresentationCore" />
    <Reference Include="PresentationFramework" />
  </ItemGroup>
  <ItemGroup>
    <ApplicationDefinition Include="App.xaml">
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
    </ApplicationDefinition>
    <Compile Include="RelayCommand.cs" />
    <Compile Include="ViewModels\ControlViewModel.cs" />
    <Compile Include="Views\TestWindow.xaml.cs">
      <DependentUpon>TestWindow.xaml</DependentUpon>
    </Compile>
    <Page Include="Views\ControlView.xaml">
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
    </Page>
    <Compile Include="App.xaml.cs">
      <DependentUpon>App.xaml</DependentUpon>
      <SubType>Code</SubType>
    </Compile>
    <Compile Include="Views\ControlView.xaml.cs">
      <DependentUpon>ControlView.xaml</DependentUpon>
      <SubType>Code</SubType>
    </Compile>
    <Page Include="Views\TestWindow.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
  </ItemGroup>
  <ItemGroup>
    <Compile Include="Properties\AssemblyInfo.cs">
      <SubType>Code</SubType>
    </Compile>
    <Compile Include="Properties\Resources.Designer.cs">
      <AutoGen>True</AutoGen>
      <DesignTime>True</DesignTime>
      <DependentUpon>Resources.resx</DependentUpon>
    </Compile>
    <Compile Include="Properties\Settings.Designer.cs">
      <AutoGen>True</AutoGen>
      <DependentUpon>Settings.settings</DependentUpon>
      <DesignTimeSharedInput>True</DesignTimeSharedInput>
    </Compile>
    <EmbeddedResource Include="Properties\Resources.resx">
      <Generator>ResXFileCodeGenerator</Generator>
      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
    </EmbeddedResource>
    <None Include="packages.config" />
    <None Include="Properties\Settings.settings">
      <Generator>SettingsSingleFileGenerator</Generator>
      <LastGenOutput>Settings.Designer.cs</LastGenOutput>
    </None>
    <AppDesigner Include="Properties\" />
  </ItemGroup>
  <ItemGroup>
    <None Include="App.config" />
  </ItemGroup>
  <ItemGroup />
  <ItemGroup>
    <BootstrapperPackage Include=".NETFramework,Version=v4.5">
      <Visible>False</Visible>
      <ProductName>Microsoft .NET Framework 4.5 %28x86 and x64%29</ProductName>
      <Install>true</Install>
    </BootstrapperPackage>
    <BootstrapperPackage Include="Microsoft.Net.Client.3.5">
      <Visible>False</Visible>
      <ProductName>.NET Framework 3.5 SP1 Client Profile</ProductName>
      <Install>false</Install>
    </BootstrapperPackage>
    <BootstrapperPackage Include="Microsoft.Net.Framework.3.5.SP1">
      <Visible>False</Visible>
      <ProductName>.NET Framework 3.5 SP1</ProductName>
      <Install>false</Install>
    </BootstrapperPackage>
  </ItemGroup>
  <ItemGroup>
    <SplashScreen Include="Images\8319.png" />
  </ItemGroup>
  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
       Other similar extension points exist, see Microsoft.Common.targets.
  <Target Name="BeforeBuild">
  </Target>
  <Target Name="AfterBuild">
  </Target>
  -->
</Project>
Aug 8, 2014 at 1:11 PM
Did you ever solve this?

I have the same problem...
Aug 12, 2014 at 2:31 PM
Tre87,

I still have not solved this issue. I forgot to mention that I am using the Express edition (Visual Studio 2013 Express for Windows Desktop) so I don't know if that has something to do with it. At my work, we have Ultimate, and while the correct theme is recognized, there are other issues (for instance, the Fluent:MetroWindow is unrecognized).

Does anyone else know why this would be happening?
  • Joe
Developer
Aug 31, 2014 at 1:44 PM
Could you upload a full repro of your issue?
Sep 4, 2014 at 2:34 PM
Edited Sep 4, 2014 at 4:30 PM
Have a related issue, can't get it to work with a RibbonWindow. I get black Windows on various themes.

I guess this is the same problem so I give you my steps that you can reproduce:
  1. Create a new WPF project (I guess Metro application if you want Metro)
  2. Nuget: "install-package Fluent.Ribbon -pre" (installed 2.1.0-i)
  3. Add xmlns:Ribbon="clr-namespace:Fluent;assembly=Fluent"
  4. Change MainWindow type to Ribbon:RibbonWindow in XAML and code
  5. Add some theme in <Application.Resources>
I tried following themes (is there a list to see what themes are available?)
  • <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />
  • <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Metro/White.xaml" /> (maybe not possible, I use Windows 7?)
  • <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Office2010/Silver.xaml" />
  • <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Office2010/Blue.xaml" />
  • <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Office2010/Black.xaml" />
On every theme I get a black Window like if you never set a theme, except Generic. There the other content (my Grids, other controls, etc.) is displayed, but the Ribbon itself is black. No errors are displayed.
Tested on Windows 7, Visual Studio 2013 Professional.

On my laptop (Windows 7, Visual Studio 2013 Ultimate) I get the same result exept for Generic. My content is displayed and the Ribbon too but only some parts of it and when i click on something, I get a massive amount of warnings like that:
  • System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='TabItemSelectedFrontBrush'
  • System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='TabItemSelectedFrontBrush'
  • System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='TabItemSelectedFrontBrush'
  • System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='TabItemSelectedFrontBrush'
  • System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='DefaultFontBrush'
  • System.Windows.ResourceDictionary Warning: 9 : Resource not found; ResourceKey='DefaultFontBrush'
  • ...
I will upload a repro project later.



Edit: I tried a little bit: some themes are shown in the XAML Designer after I compiled my project but in the Application it is still black.
Sep 5, 2014 at 8:40 AM
Developer
Sep 7, 2014 at 10:54 AM
Now i realize what was wrong.

I fixed this kind of issue with https://fluent.codeplex.com/SourceControl/changeset/08f2e61d0b80
Please grab the latest source version and try again. If you don't want to build from source you can fix it by using the following in App.xaml:
<ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" /> 
<ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Office2010/Silver.xaml" /> 
Using the Office 2013 theme is possible in Windows 7. Please note that, in the latest source version, Metro was renamed to Office2013 and MetroWindow is no longer needed because RibbonWindow can be used to use both themes (Office2010 and Office2013).
Marked as answer by batzen on 9/20/2014 at 4:12 AM
Sep 8, 2014 at 9:54 AM
Worked for me. A little bit confusing that Nuget 2.1.0i is not 2.1.0i on Codeplex.
Developer
Sep 8, 2014 at 6:52 PM
The source version does not contain the "i" postfix.
But you are right, we have to release an updated nuget package.
The plan was to release 3.0 (2.1 will be renamed to that) at the end of september.