diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 1e8e0aeef..5378cc00e 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -211,7 +211,7 @@
xmlbasics.xml
-
+
@@ -706,6 +706,8 @@
Designer
+
+
@@ -1674,7 +1676,7 @@
False
-
+
\ No newline at end of file
diff --git a/apps/tests/xml-declaration/mymodule/MyControl.css b/apps/tests/xml-declaration/mymodule/MyControl.css
new file mode 100644
index 000000000..d701672c7
--- /dev/null
+++ b/apps/tests/xml-declaration/mymodule/MyControl.css
@@ -0,0 +1,3 @@
+.MyStackLayout {
+ background-color: red;
+}
diff --git a/apps/tests/xml-declaration/mymodule/MyControl.ts b/apps/tests/xml-declaration/mymodule/MyControl.ts
index 53ba3b697..aca0396d3 100644
--- a/apps/tests/xml-declaration/mymodule/MyControl.ts
+++ b/apps/tests/xml-declaration/mymodule/MyControl.ts
@@ -18,5 +18,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
this.addChild(lbl);
this.addChild(btn);
+
+ this.cssClass = "MyStackLayout";
}
}
\ No newline at end of file
diff --git a/apps/tests/xml-declaration/mymodulewithxml/MyControl.css b/apps/tests/xml-declaration/mymodulewithxml/MyControl.css
new file mode 100644
index 000000000..dd3ccf653
--- /dev/null
+++ b/apps/tests/xml-declaration/mymodulewithxml/MyControl.css
@@ -0,0 +1,3 @@
+.MySecondCustomStackLayout {
+ background-color: green;
+}
diff --git a/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml b/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
index 016a2736c..4fe8e30f7 100644
--- a/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
+++ b/apps/tests/xml-declaration/mymodulewithxml/MyControl.xml
@@ -1,4 +1,4 @@
-
+
diff --git a/ui/builder/builder.ts b/ui/builder/builder.ts
index 1942552e7..9cbb64f36 100644
--- a/ui/builder/builder.ts
+++ b/ui/builder/builder.ts
@@ -7,6 +7,8 @@ import componentBuilder = require("ui/builder/component-builder");
import templateBuilderDef = require("ui/builder/template-builder");
import platform = require("platform");
import definition = require("ui/builder");
+import frame = require("ui/frame");
+import page = require("ui/page");
var KNOWNCOLLECTIONS = "knownCollections";
@@ -36,6 +38,7 @@ export function parse(value: string, context: any): view.View {
}
function parseInternal(value: string, context: any): componentBuilder.ComponentModule {
+ var currentPage: page.Page;
var rootComponentModule: componentBuilder.ComponentModule;
// Temporary collection used for parent scope.
var parents = new Array();
@@ -115,7 +118,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
if (args.prefix && args.namespace) {
// Custom components
- componentModule = loadCustomComponent(args.namespace, args.elementName, args.attributes, context);
+ componentModule = loadCustomComponent(args.namespace, args.elementName, args.attributes, context, currentPage);
} else {
// Default components
componentModule = componentBuilder.getComponentModule(args.elementName, args.namespace, args.attributes, context);
@@ -138,6 +141,10 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
} else if (parents.length === 0) {
// Set root component.
rootComponentModule = componentModule;
+
+ if (rootComponentModule && rootComponentModule.component instanceof page.Page) {
+ currentPage = rootComponentModule.component;
+ }
}
// Add the component instance to the parents scope collection.
@@ -175,7 +182,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
return rootComponentModule;
}
-function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object): componentBuilder.ComponentModule {
+function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object, parentPage?: page.Page): componentBuilder.ComponentModule {
var result: componentBuilder.ComponentModule;
componentPath = componentPath.replace("~/", "");
@@ -208,6 +215,23 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
result = componentBuilder.getComponentModule(componentName, componentPath, attributes, context);
}
+ // Add component CSS file if exists.
+ var cssFileName = fileName.replace(".xml", ".css");
+ if (fs.File.exists(cssFileName)) {
+ var currentPage = parentPage;
+
+ if (!currentPage) {
+ var topMostFrame = frame.topmost();
+ if (topMostFrame && topMostFrame.currentPage) {
+ currentPage = topMostFrame.currentPage;
+ }
+ }
+
+ if (currentPage) {
+ currentPage.addCssFile(cssFileName);
+ }
+ }
+
return result;
}
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index e056dc8a4..185ad529d 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -20,7 +20,7 @@ var navigationBarHiddenProperty = new dependencyObservable.Property(
);
function onNavigationBarHiddenPropertyChanged(data: dependencyObservable.PropertyChangeData) {
- console.log("onNavigationBarHiddenPropertyChanged("+data.newValue+")");
+ console.log("onNavigationBarHiddenPropertyChanged(" + data.newValue + ")");
var page = data.object;
if (page.isLoaded) {
page._updateNavigationBar(data.newValue);
@@ -116,15 +116,18 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
this._refreshCss();
}
+ private _cssFiles = {};
public addCssFile(cssFileName: string) {
if (cssFileName.indexOf(fs.knownFolders.currentApp().path) !== 0) {
cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
}
-
- var cssString;
- if (fs.File.exists(cssFileName)) {
- new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => { cssString = r; });
- this._addCssInternal(cssString, cssFileName);
+ if (!this._cssFiles[cssFileName]) {
+ if (fs.File.exists(cssFileName)) {
+ new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
+ this._addCssInternal(r, cssFileName);
+ this._cssFiles[cssFileName] = true;
+ });
+ }
}
}