Is there any way to customize the background color and Size of the UWP App_Back button?
There is a way to customize title bar. I think this article would be helpful for you:
Easily manage the Title Bar in Windows 10 apps
For example, you can edit color with ApplicationView.GetForCurrentView().TitleBar property:
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Maroon;
titleBar.ButtonForegroundColor = Colors.Yellow;
Or you can even find by this link solution how to remove chrome and create your own chrome with back button (a little bit complicated way)
The idea is to set application "chromeless" with CoreApplication class and code like:
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
After this you can create your XAML element to be instead of Title Bar with help of Window.SetTitleBar method
Related
I'm trying to change the color of a tab in a tabpanel I have when my app goes online or offline. I have the online and offline events already setup but now I need to be able to change the color of the tab from these events.
How do I go about accessing an individual tab and setting it's CSS?
you could use ext component query to get the handle of the component and then add/remove class
Ext.ComponentQuery.query('yourselector')[0].addCls('yourclass')
You can get the individual tab from tabpanel by referring it as following inside the controller class (inside the refs):
myDesiredTab: '#myTabPanelId container[title=myDesiredTabTitle]'
and afterward you can try:
this.getMyDesiredTab().tab.setCls('myDesiredCssClass');
This idea hasn't been tested but might just work as the tabbar does have cls config and we have a way to access the individual tab.
hi anybody help how to write page navigation code for win8 metro apps in user control.
I tried with following code it is not working.
this.Frame.navigate();
If you are following an MVVM pattern with a framework like Caliburn Micro, MVVMLight, MicroMVVM then all of them provide a NavigationService of some sort which is usually used for navigation purpose. I would recommend you use that.
From the child control you can do this
var frame = Window.Current.Content as Frame;
frame.Navigate(typeof (Page2));
Where Page2 is the page you want to navigate to.
I am developing a simple application for windows 8. And now I want to modify the top app bar( i.e it should not look like bottom app bar) and I want it to work much better than only showing the default icons(like navigation job). I want to add my icons of different sizes(length).yes similar to those of weather app or travel app. But I am unable to find any good reference to start with. please help, from where I should start doing it. and whether is it possible to modify the app bar. please guide. note: I am developing app in javascript
Your very basic top appbar can be implemented using the following HTML:
<div data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
<!-- your custom top bar content goes here -->
</div>
From inside the div, you can add anything to your hearts content, even AppBarCommands. Don't forget to initialize all win controls:
<script>
document.addEventListener("DOMContentLoaded", function () {
WinJS.UI.processAll();
}, false);
</script>
Quickstart: adding an app bar with custom content
Read following article, you'll get lot's of good tips
31 Days of Windows 8 | Day #4: New Controls
I need to create a list of buttons inside a ContentPane (one under the other) as a "single column vertical grid". I did not found such a layout widget in dijit ref. guide.
What can I use? How can I get a new line when adding (addChild) elements to a content pane?
There's dojox grid container but looks overkill to me.
i know that this is the least elegant way to do it but it is one-of-a-kind: you could create a custom div-domNode containing your buttons just like this:
var btn1=new dijit.form.Button({...});
var btn2=new dijit.form.Button({...});
// custom div-domNode
var buttons = dojo.create('div');
// filling it with the domNodes of your buttons separated by a <br> node
dojo.create(btn1.domNode,null,listOfButtons);
dojo.create('br',null,listOfButtons);
dojo.create(btn2.domNode,null,listOfButtons);
and display it in you ContentPane
myContentPane.set('content', buttons);
A ul or a table would work as well.
Finally let me say that im very ashamed of myself for not knowing any better answer.
Hope its what you asked for.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});