0918-201411 Svg images, material design, and images states

Material design is a hundred page document explaining that each active UI object - ie: a UI object with which the user can interact - should react in a way the user knows that he is interacting with it.

This is the generalisation of button states: when you press a button its color changes. XamSvg has a built in feature which dynamically remaps the svg color depending on the image state.

On Android use local:colorMappingSelected
            android:layout_height="wrap_content" />

By code:

colorMapping = new Dictionary<stringstring> {{"434343","232323"}}; colorMappingSelected = new Dictionary<stringstring> {{"434343","737373"}};
image = SvgFactory.FromBundle("pictos/hand.svg", fillHeightPixels: 1.2f, colorMapper: SvgColorMapperFactory.FromDic(colorMapping)); imageSelected = SvgFactory.FromBundle("pictos/hand.svg", fillHeightPixels: 1.2f, colorMapper: SvgColorMapperFactory.FromDic(colorMappingSelected)); var button = new UiButton {     Font = isSmall || isVerySmall ? AppStyles.TextFont4Medium : AppStyles.ButtonFont1,      BackgroundColorDisabled = AppStyles.ButtonBackgroundColorDisabled,     BackgroundColor = AppStyles.BackColor,     Opaque = true };
button.SetImage(image, UIControlState.Normal); button.SetImage(imageSelected, UIControlState.Highlighted); button.SetImage(imageSelectedUIControlState.Selected);

Feedback and Knowledge Base