First of all, I'm new to XAML / C# (am iOS/Android programmer) so please bear with me instead of immediately voting down. My app has some GridViews that contain buttons. A lot of these buttons are similar and I would like to refactor this. For simplicity let's say my buttons are just Rectangles with a given color. This color might come from the Item class that defines the particular item in the GridView, or it might be hardcoded. I want the rectangle to change color on hover and pressed states. I want these colors to be parameters as well.
What is the best way to achieve this?
I tried to make a Button subclass but somehow I couldn't access the dependency properties in the VisualStateManager
I tried to write stuff in the code-behind but then I wasn't sure how to delegate the click command to the ViewModel class.
Could someone give me a small working example?
Thanks
You can do this with style templates.
In the Visual Studio designer, right-click on your button and then select Edit Template and then select Edit a Copy....
You will then be prompted to name your new style and also for which file to store it in. For now, just give it a unique name such as MyButtonStyle, and select the current file.
Visual Studio will then add a copy of the style to the current xaml document, and will update your button to use the new style.
<Button x:Name="Download" Style="{StaticResource MyButtonStyle}"></Button>
After this, you can update the new style including changing the colors for the different visual states such as hover or clicked.
You can then proceed to use the new style in other buttons in the same document. To use the style in multiple xaml documents, you have to pull it out into a common resource file.
So you want to adjust your button using custom properties. This is a good time to use a custom control. You can create whatever dependency properties you want and adjust your layout in your code. http://timheuer.com/blog/archive/2012/03/07/creating-custom-controls-for-metro-style-apps.aspx
Related
Is there any way to replace one control with another?
I have a library from a vendor that uses a TextBox and I would like to change it to a RichTextBox.
Can I maybe set up a Style with a TargetType=TextBox and assign it to RichTextBox?
I do have access to the vendor code, but putting the replacement in the parents Resources would be much easier than updating their code each time they have a new release.
Is this even possible?
Thanks!
Without knowing more about the control(s) in question, I would recommend using the "Edit Template > Edit a copy" in VS or Blend and changing the TextBox to a RichTextBox. This should leave the rest of the template intact.
If that doesn't work, please post the ControlTemplate and/or Style code you used, and maybe a screenshot of the vendor control.
Being a beg. me facing a problem. Please help me out.
I have created a "Style" in xaml and named it "CustomButton" for creating a button( which consist of Two Images and one Textblock) and want to load one of the image and text to TextBlock only at runtime i.e by code behind so that ill be having diffrent image and differnt text for each button. Actully, me need create an array of Buttons of the same style but diff. Image.
Style mystyle = (Style)Application.Current.Resources["CustomButton"];
Setter templateSetter = (Setter)mystyle.Setters[0];
btnNext.Style = mystyle;
i created "style" in App.xaml and in code behind i call name style.
hope this help !
Thongaduka !
Depending how much XAML you want, you need to either create a custom UserControl that inherits from Button, with a DependencyProperty for the background.
Or you can specify a ImageBrush for the Background property, and use that, along with the Content property, in your custom style. The ImageBrush approach is going to require some 3-4 lines of XAML per button.
And I wouldn't recommend creating any UI controls from C#, as you can do everything you want to using databindings. If you're attempting to render custom buttons inside a listbox, with a custom background, simple databinding work should do just fine, rather than creating any custom controls or styles.
Feel free to clarify (with code!) what you're attempting to do now.
I'm developing a WPF application in C# and was thinking about implementing a custom UI element accross various windows.
I would like to have a minimized tray (only about 4px visible) that expands after clicking on an icon next to the tray. The expanded version would show all controls and would minimize when I click the icon again. I created a quick HTML concept to clarify things.
I know I could put a stackpanel and button in my application and making both of them move up when I click the button, but then I would need to duplicate the code a lot.
Though I'm experienced with C#, I'm fairly new to WPF interface development/templates, but I'm sure there has to be a way so I can use that UI element accross my application without needing to copy/paste a lot of lines of code in my form class file.
I hope someone can help me, or at least point me in the right direction.
There are three ways to customize your elements.
1 If you only need visual modifications you can use styles to change the appearance of the .net default controls. You can even override / extend the default templates.
2 If you want custom logic in a control you can create a custom control. The framework brings a lot of "primitives" to build upon. Examples are ContentControl or HeaderedContentControl. Say you want to build a custom expander control you can inherit your custom control from HeaderedContentControl which provides you with Header and Content properties and you just have to implement the toggling logic yourself.
CustomControls are a good choice if you want to build basic functionality which can be used throughout your application. They can be themed/styled depending on the use case, too (see 1).
3 If you want to compose different controls into one control you can create a UserControl. User controls are composed using XAML. Most top level controls are user controls driven by a view model.
Your case can be build using a Popup and ToggleButton or an Expander.
The decision depends on the desired behavior. If you want the opened panel to move following content down you need a expander. If you want a dropdown like functionality you need popup.
If you use a popup just bind the IsPopupOpen Property to IsChecked of the ToggleButton and set PopupStaysOpen = false to wire the button to your popup.
If you use an expander control you should create a style which can be applied to all equal expanders in your application to minimize the required XAML in each view.
How about using Expander Control?
There's a control called an Expander that is perfect for this. You'll have to style it to look like you want, however it has the functionality you want built-in.
I am trying to develop a custom radio button that looks like a two-option button control that looks somewhat as shown below with toggling of highlighted state. Not sure where to start.
Is there any such controls already available that I can use.
OK, here is a brief overview of what you will need to do ...
Firstly, you will need to change the ControlTemplate for the existing RadioButton control. There are lots of tutorials available that describe this,, for example this one.
Replace the standard template with some suitable markup for your illustration above. Perhaps a two column Grid?
Within each Grid cell add a Rectangle, one behind Option1, and the other behind Option2
Use the VisualStateManager to change the Fill property of each Rectangle based on the controls current VisualState. i.e. when Pressed toggle the background colours.
The steps above should help you achieve your goal. Please read the linked web pages and the Silverlight documentation. If you are still struggling after that,, come back and ask another question.
I am trying to develop a Customize TabControl in which I'll divide the Whole TabControl into three Parts:
1)Tab Header
2)Common Region(for all Tab) and
3)Tab Content region for specific Tab
Update:
Please provide your best answers or samples if you have then, any type of help will be appreciated.
Thanks in Advance
You can overwrite the TabControl Template to be anything you want, including making it have a static region that stays visible regardless of which tab is selected.
Within the Template, I normally use a panel with IsItemsHost=True to define where the "Tab" portion of the tab control will be displayed and <ContentPresenter ContentSource="SelectedContent" /> where I want the selected tab content to be displayed.
The TabControl.ItemTemplate can also be overwritten to further define your Tabs, and TabControl.ItemContainer can be overwritten to modify just the TabContent part of the TabControl.
Hmm ... I don't quite understand why one would do this, but if I were you I would implement this using WPF.
I would implement the tab header as a StackPanel filled with Buttons (their style obviously needs to be redone so that it looks like tabs). The content would be a rectangle containing a grid whose content changes on clicking a button. And that's pretty much it for the basic sceleton. I don't understand your Common Region. What is also nice is to add a little "X" inside each tab in order to close it. That can be done with buttons as well.
It might make sense to use Expression Blend to create such a control.
Best wishes,
Christian