I'm essentially creating a vertical breadcrumb to create a website navigation for a mobile (iphone) website. Similar to maybe how http://news.bbc.co.uk/sport1/hi/football/default.stm works as you click into "Premier League"
Using the Asp:Menu control and a SiteMapDataSource I am binding only the current levels links within the sitemap and then finding their parent to manually insert at the top of the list. An example resulting nav would be:
About,
Who Are We,
What We Do,
Locations
var mi = new MenuItem();
mi.NavigateUrl = node.Url;
mi.Text = node.Title;
mi.ToolTip = node.Description;
MobileMenu.Items.AddAt(0, mi);
This is all fine and works perfectly. However, this dynamically inserted top MenuItem needs to be styled in a different background colour. In the example above "About" would have a darker bg colour than the 3 items below it.
But there isn't any kind of obvious property on the MenuItem to do this.
How could I dynamically set a style on the MenuItem that I am inserting into position 0?
In answer to this I used the jQuery li:nth-child() method to set a class to the li after which I then use Page.ClientScript.RegisterStartupScript().
private const string HighlightScript =
"<script language=\"javascript\">\n" +
"$(\"ul.top li:nth-child(4)\").addClass(\"menu-Fourth\");" +
"</script>";
public void AddHighlightScript(string script, string name)
{
Page.ClientScript.RegisterStartupScript(GetType(), name, script);
}
If someone else has a solution please share.
Related
I am testing new Shell Page in Xamarin Forms.
I am wondering if the search handler could be personalize, for example apply a rounded effect on search corner.
I tried to redefine the Template of SearchHandler but it just change the appearance of the result request of Search Handler (How suggestion are show to user).
Thanks so much for your help !
I am back after severals test.
I find one way to do it easily.
For Top Navigation Bar in Shell App, there is a "Shell.TitleView" tag.
You can inside this tag define a personalize template.
So i deleted the "SearchHandler" and implement inside "Shell.TitleView" a Custom SearchBar with Rounded Corner.
It works pretty fine.
I can give you sample if needed.
If you know another way to do it, i will be a pleasure to test it.
Thanks
I think it's impossible to implement the Rounded SearchHandler if using SearchHandler in Shell Application .
First , about SearchHandler appearance , there is no way to change the Round of it :
BackgroundColor, of type Color, is the color of the background to the search box text.
CancelButtonColor, of type Color, is the color of the cancel button.
CharacterSpacing, of type double, is the spacing between characters of the SearchHandler text.
FontAttributes, of type FontAttributes, indicates if the search box text is italic or bold.
FontFamily, of type string, is the font family used for the search box text.
FontSize, of type double, is the size of the search box text.
HorizontalTextAlignment, of type TextAlignment, is the horizontal alignment of the search box text.
PlaceholderColor, of type Color, is the color of the placeholder search box text.
TextColor, of type Color, is the color of the search box text.
VerticalTextAlignment, of type TextAlignment, is the vertical alignment of the search box text.
Second , if using Shell Custom Renderers also can not found SearchBar in NavigationController .
For example in iOS shell renderer :
public class CustomNavBarAppearanceTracker : IShellNavBarAppearanceTracker
{
public void Dispose()
{
//throw new NotImplementedException();
}
public void ResetAppearance(UINavigationController controller)
{
//throw new NotImplementedException();
}
public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
{
//throw new NotImplementedException();
//var seabar = controller.SearchDisplayController.SearchBar;
controller.NavigationBar.BackgroundColor = UIColor.Red;
Console.WriteLine("-----"+controller.NavigationItem.SearchController.SearchBar);
}
public void UpdateLayout(UINavigationController controller)
{
//throw new NotImplementedException();
}
}
The Output is : controller.NavigationItem.SearchController.SearchBar = null
If not using SearchHandler , you can have a try with Custom SearchBar Renderer to implement it .
I have tried to hide the List View above design while scrolling down the List view. In my page I have image, entry, button and List view presented vertically, While user is try to scroll down the List view, design above the list is need to hide and if he try to scrolling up List view, the design is unhide is my requirement. Please suggest any idea to achieve this functionality. Thanks in advance.
Look at the Header property of the list view. It does exactly what you want to achieve. You have to put the visual elements (image, entry, button & etc.) that you want to hide in the header of the list view (for example grouped in a stack layout).
Label lblExample = new Label
{
Text = "Label",
};
Button btnExample = new Button
{
Text = "Button",
};
StackLayout stackHeader = new StackLayout
{
Children =
{
lblExample,
btnExample
}
};
ListView listView = new ListView
{
Header = stackHeader,
};
I have GWT CellList and after adding items via a DataProvider I use the following code to add styling to each item.
members... we can styling if a matched item is also in members
matched... passed in as a MetaJsArray<Contact>
CellList<Contact> list = getView().getResults();
for (int i=0; i<matched.length(); i++) {
if (members.isExistingEntry(matched.get(i))) {
list.getRowElement(i).addClassName("RED");
}
}
This code works until... I click items in the list.
onCellPreview() is called for each item clicked, but the previously clicked item loses its "RED" styling.
Do I need to add styling differently? Or how do I stop the loss of "RED"?
My guess its something to do the way GWT generates the javascript. When you manually set the cell on load its all good. When you select it, the javascript changes the object to use the selected CSS and when you un select it, the CSS changes to the default GWT CSS style for the cell.
Only way I can think of is to have a handler on select. When you select an item:
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
// get item last selected
// check if needs re styling
// restyle
// do things with the new selected object
}
});
Add another check through the cell list and mark the ones that got unmarked.
This way might be inefficient, but its one way of avoiding your problem that I can think of. hope it helps.
After trying various approaches the only want that works, without hacks, is to define the style at the point of rendering.
With my own ContactCell extending AbstractCell the render() function can pass in a styling value into the contactcell.ui.xml file.
#Override
public void render(Context context, Contact value, SafeHtmlBuilder sb) {
if (value == null) {
return;
}
String styling = value.getStyling();
uiRenderer.render(sb, styling);
}
and then in contactcell.ui.xml file
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:with field='styling' type='java.lang.String'/>
<div class="{styling}"> ... </div>
GWT will mangle the style name so define your own CssResource class to access the class name thru so that the class name is mangled throughout the app.
I'm a frontend developer working with a seemingly incompetant .NET dev that cant seem to resolve why the ASP Menu control is not showing the selected menu item. The .NET developer sent me the following code. Is there some rules missing here that are need to enable the CSS?
Thanks in advance
Controller config
<asp:Menu ID="mnuMaster"
runat="server"
DataSourceID="sitemapMaster"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="0"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
CssSelectorClass="TopMainMenu" onmenuitemdatabound="mnuMaster_MenuItemDataBound"
StaticBottomSeparatorImageUrl="~/App_Themes/PCTools/Images/top_menu_separator.gif"
></asp:Menu>
CSS selected classes
.TopMainMenu .AspNet-Menu li a:active, .TopMainMenu li.AspNet-Menu-Selected a,.TopMainMenu li.AspNet-Menu-ChildSelected a,.TopMainMenu li.AspNet-Menu-ParentSelected a {
background:url(Images/navbg.gif) repeat-x 0 -86px;
}
We normally use a standard UL group in ordinary HTML that a designer provides and then make them into HTML Server Tags.
There may be other solutions but the solution we usually do is this.
First each top level menu item needs an ID.
If the menu is on a masterpage (im going to assume it is)
in the masterpage code behind you can place code like this.
//Discover currently navigated page TYPE
if (this.Page is `pagetype of the current page`)
//add a CSS class to the top level menu item
miFirstMenuItem.Attributes["class"] += " highlightedMenuItemCSSClass";
Then the HTML Output would append an additional CSS class to that menu item which you apply your specific style
Heres a real life example
Node you would have to change the type in the SetActiveTab method to the correct type for the MenuItem
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bool homeVisited = Page is Default;
bool productsVisited = Page is Products_List;
bool demoVisited = Page is Demonstrations;
bool contactVisited = Page is Contact;
if (homeVisited)
SetActivePage(hlHome, ButtonSide.Left);
if (productsVisited)
SetActivePage(hlProducts, ButtonSide.Middle);
if (demoVisited)
SetActivePage(hlDemo, ButtonSide.Middle);
if (contactVisited)
SetActivePage(hlContact, ButtonSide.Right);
}
}
This shows a different way than I described above but you can replace it with link.Attributes["class"] += " cssClass"; Notice the space after the first ".
Also ButtonSide is an enum I added since all the middle menuitems would have the same CSS class in my particular case and left and right ones as well.
private void SetActivePage(HyperLink link, ButtonSide side)
{
if (side == ButtonSide.Left)
link.CssClass = "currentleft";
if (side == ButtonSide.Middle)
link.CssClass = "currentmiddle";
if (side == ButtonSide.Right)
link.CssClass = "currentright";
}
There seems to be a bug in VS201 / .Net4 where the CSS classnames you specify in de asp.menu properties StaticSelectedStyle & DynamicSelectedStyle are ignored. The menu always uses classname "selected".
I've reviewed all the documentation and Google results surrounding this and I think I have everything setup correctly. My problem is that the symbol is not appearing in my app. I have a MovieClip symbol that I've embedded to my Flex Component. I need to create a new Image control for each item from my dataProvider and assign this embedded symbol as the Image's source. I thought it was simple but apparently not. Here's a stub of the code:
[Embed(source="../assets/assetLib.swf", symbol="StarMC")]
private var StarClass:Class;
protected function rebuildChildren():void {
iterator.seek( CursorBookmark.FIRST );
while ( !iterator.afterLast ) {
child = new Image();
var asset:MovieClipAsset = new StarClass() as MovieClipAsset;
(child as Image).source = asset;
}
}
I know the child is being created because I can draw a shape and and that appears. Am I doing something wrong? Thank you!
You should be able to simply set child.source to StarClass:
child = new Image();
child.source = StarClass;
See the MovieClipAsset Language Reference for more details:
you rarely need to create MovieClipAsset instances yourself
because image-related properties and
styles can be set to an
image-producing class, and components
will create instances as necessary.
For example, to set the application
background to this animation, you can
simply write the following:
<mx:Application backgroundImage="{backgroundAnimationClass}"/>