In WPF (VS2013), I'm creating a button like so:
<Button>
<Label>1</Label>
</Button>
Each of these buttons will have more to it, such as increased font size of the Label, grid row/column assignment, and I might use a binding for the label so that I can change the number. I'm creating a calculator app so I need to reuse this button 10 times (one for each number 0-9). Instead of copying/pasting this button XML 10 times, I wanted to see if I could templatize it.
I've read a little about ControlTemplate and DataTemplate, but I'm not sure if either of these are the correct thing to use. It's also not clear to me what should be a style or what should be a template.
So if someone could help me understand how to "templatize" the button and its styles (e.g. width, height, font size, etc) so that they can be easily reused, that would help a ton. Guidance is appreciated!
Use a ControlTemplate when you want to overwrite the entire template for a control, use a DataTemplate when you want to tell WPF how to draw a data object (usually the DataContext), and use ContentTemplate when you want to tell WPF how to draw the Content property of an object.
Creating a whole new ControlTemplate is quite complex. To demonstrate, check out this MSDN example for an example ControlTemplate for a Button.
In your case, I would recommend creating a Style for your button with setters for common properties such as Height, Width, Font, etc. If you want to draw your button's Content property in a custom way without completely overwriting the button template, include a ContentTemplate style setter to tell WPF how to draw the Button.Content property.
<Button Style="{StaticResource CalculatorButton}" Content="1" />
and
<Style x:Key="CalculatorButton" TargetType="{x:Type Button}">
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="50"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding }" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The ControlTemplate defines how the button looks, the ContentTemplate defines how the Button.Content looks, and the DataTemplate used for the ContentTemplate is defining how the data object of "1" will be drawn.
You can start with a copy of the style of the button. Use Blend (part of VS) to create that: open the context menu of the button inside the object tree, then select "Edit template" (or similar, don't have an english version at hand), then "Copy of template" (or alike).
Now you may change properties (in designer or XAML). Every button that shall have this style needs to reference this new ressource.
You need to create a new Style of a button. Learning curve is not too steep, but the benefits are enormous. You can start learning about it here: http://msdn.microsoft.com/en-us/library/ms745683(v=vs.110).aspx
Long story short: Open your project with Blend, right-click on your button, "Edit Style", "Edit a copy". If you choose to define it in Application, you can reuse it among other pages (it will be then in you App.xaml file)
Once you have the base style, edit it as much as you need.
Related
I have a NavigationView control with an AutoSearchBox displayed:
<NavigationView Style="{StaticResource CompactNavigationViewStyle}"
x:Name="NavigationView" OpenPaneLength="280"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
AlwaysShowHeader="False">
<NavigationView.AutoSuggestBox>
<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="235"
x:Name="SearchTxt" QuerySubmitted="OnSearch" />
</NavigationView.AutoSuggestBox>
For some page I don't want to show the Search (i.e SettingPage), so on NavigationView ItemInvoked event I added this code:
private void NavigationView_ItemInvoked(NavigationView sender,
NavigationViewItemInvokedEventArgs args)
{
if (!args.IsSettingsInvoked)
{
string tag = (args.InvokedItem as string);
switch(tag)
{
case "settingpage":
case "exportpage":
SearchTxt.Visibility = Visibility.Collapsed;
break;
default:
SearchTxt.Visibility = Visibility.Visible;
break;
}
// Code to load new page to Frame here
}
}
The AutoSuggestBox is hidden from NavigationView, but the Search icon still displayed on Compact mode, how to hide this icon too?
Unfortunately, what you are looking for does not appear to be possible with the NavigationView control. This is relatively new control, however, so Microsoft may be updating it in the future.
For the technical reason, setting a value to the AutoSuggestBox property does more than just add an AutoSuggestBox to the NavigationView; it also changes some other internals of the NavigationView (such as the one specifying showing that search icon when the pane is collapsed).
The AutoSuggestBox property is an optional property, and designed to contain a search box "to allow for app-level search". This suggests that it is designed to be always visible across the entire app when present (although I could see a reasonable argument being made for having it disabled on certain pages). But simply, it looks like this is a use case the control is not designed for.
As for some ideas for work-arounds:
Option 1
The one place you can freely put whatever content you want is the NavigationView.Footer. You can implement something like the above code, and then adjust the StackPanel's visibility property.
The main downside to this option, of course, is that the footer is stuck at the bottom, which may be an odd place to put a search bar. You also will need to give the StackPanel some visual styling to mimic the hover and click effects on the rest of the NavigationView.
<StackPanel Orientation="Horizontal"
Margin="10">
<TextBlock Style="{StaticResource HamburgerMenuIconStyle}"
Text=""></TextBlock>
<TextBlock Style="{StaticResource HamburgerMenuItemTextStyle}"
Text="Home"></TextBlock>
</StackPanel>
And then the supporting styles for the Page.Resources, so that the above bindings work (you may need to play around with the numbers for the margins and font sizes, but this looked good for me):
<Page.Resources>
<Style x:Key="HamburgerMenuIconStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"></Setter>
<Setter Property="FontSize" Value="18"></Setter>
<Setter Property="Margin" Value="5,0,0,0"></Setter>
</Style>
<Style x:Key="HamburgerMenuItemTextStyle" TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="15,0,20,0"></Setter>
<Setter Property="FontSize" Value="16"></Setter>
</Style>
</Page.Resources>
Option 2
You can implement your own NavigationView, using a SplitView. This is actually not too difficult, and there is even a fantastic tutorial in the following link (which I have used for several personal projects): https://mva.microsoft.com/en-US/training-courses/windows-10-development-for-absolute-beginners-14541?l=4DLgEZ0qB_5705244527. Specifically see Video #22, if the link doesn't open that one.
Implementing your own works well enough for visual looks, and for navigational functionality. Unfortunately, however, the more advanced features in the built-in NavigationView control are considerably more time-consuming to implement, such as the built-in "Back" navigation support, and the built-in fluent design styling. You can wrap this into a UserControl or a custom Control, so that you can reuse it in other projects, but the initial time investment will still be high.
It is worth noting that the requirements you are imposing on your users by using a NavigationView in the first place should be considered (if you have not done so already):
The NavigationView was introduced in the Fall Creator's Update, so any users must have a version newer than that. Somewhere around 90% of users who have Windows 10 do, so this is pretty safe for most people.
The Back navigation functionality of the NavigationView was introduced even more recently, specifically in v10.0.17110.0. This is still in Windows Insider, and not generally released yet (I believe), so this functionality specifically may not be a good choice for a larger audience yet. The reason I point this out, is that to reach a larger audience, you would need to implement the back functionality yourself anyway, so the barrier to writing your own NavigationView may not be as high as it seems.
Hope that helps!
<NavigationViewItem
x:Name="NaviSearchItem"
Icon="Find"
Visibility="Collapsed" />
<NavigationViewItem x:Name="NaviSearchBarItem">
<AutoSuggestBox
x:Name="NaviSearchBar"
PlaceholderText="Search"
QueryIcon="Find" />
</NavigationViewItem>
You can surround the AutoSuggestBox with NavigationViewItem and place the Search Button above it. Then you need to set the visibility of NaviSearchBarItem instead of the AutoSuggestBox. This hides the AutoSuggestBox perfectly.
However, there is a tiny issue with this solution. When you click on the NaviSearchBarItem to open the Pane, the animation of tab (a blue pipe that indicates the selected item) will still slide to the NaviSearchBarItem, and then it disappears. The ideal solution should be that the blue indicator still remain on the original item. I don't know how to fix this.
I have followed the DiagramDesigner example on Codeproject for learning how to use Adorners in WPF as it fits quite a few of my needs relatively closely.
I have adapted the implementation a little, and also added my own adorner, for controlling the opacity of a control via a slider (slider on the adorner).
Following the same methods as the author, I placed the slider and other feature in a xaml style definition file as below. I am just now struggling A) to figure out how to access the slider at any level, B) how best to start hooking this up with an underlying Viewmodel that will be used for various settings (on adorners).
<Style x:Key="OpacityAdorner" TargetType="{x:Type adorners:OpacityChrome}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type adorners:OpacityChrome}">
<Grid>
<Slider x:Name="OpacitySlider" Style="{StaticResource OpacityControl}" ToolTip="Alter the opacity of the image to overlay with other images" Visibility="Collapsed"/>
<Ellipse x:Name="OpacitySliderEnable" Style="{StaticResource OpacityIcon}" ToolTip="Alter the visual opacity of the image" Visibility="Visible"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The codeproject example is here http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part
A) Use something like the following snippet to get the slider from the applied template.
var slider = opacityAdorner.Template.FindName("OpacitySlider", opacityAdorner) as Slider;
there are cases where the template has not yet been applied, in that case you need to preceed the previous call with the following:
opacityAdorner.ApplyTemplate();
B) The best approach for hooking up with the view model (in my opinion) is to expose the required properties as dependency properties on the OpacityChrome adorner. You then use normal Binding to hook up the new properties to the view-model, and TemplateBinding to hook them up to the template elements.
So, I have this Window. On it, I'm creating a list of TextBlocks and TextBoxes in pairs. When you click on either, they will put a number in the corresponding TextBox, and set some values in the background. This all works well now.
I have the following XAML to create a custom Checkbox (as it has the behavior I'd like to use for this). My problem is that I want to bind different content into both the TextBlock and TextBox. For the TextBlock, I bound to the Content property, but I can't find a suitable option to satisfy the second binding. I considered placing it in the tag, but this didn't feel right, and in any case, I'm already binding an index value I require into there.
<Style x:Key="CustomCHK" TargetType="{x:Type CheckBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<DockPanel LastChildFill="True">
<TextBox DockPanel.Dock="Right" Width="50" Height="30" />
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Feels like there should a simple solution to this, but I'm just trying to decide what's best. Do I create a custom checkbox class and just add a couple properties?
As always, I appreciate any direction you can offer me.
Unfortunately, there is no straightforward way to do this. I can see just two (somewhat flawed) workarounds:
Subclass CheckBox to suit your needs, and add the additional content properties that you need. The advantage is that this will fully enable your IDE's programming help for setting the content properties, and those properties will be typesafe. The downside is that your will need to add C# code for the sole purpose of declaring the additional content properties (i.e. without adding any "behavioral logic"), which somehow seems to conflict with a "clean" XAML-only for presentation approach.
You could try passing an array to the Content property, and then place several ContentPresenter instances in your control template, each of which bind to another item in the array. Binding property paths should support indexed access, though your code may become a bit verbose, as arrays in XAML have to be written explicitly by using the x:Array markup extension.
In a WPF application, I would like to display a grid of tiles (buttons essentially) using images from a folder location. There could be any different number of images in the folder, so the tiles/buttons need to be generated dynamically and formatted based on the amount. These need to be buttons that can trigger mouse click events.
I'm very new to C# and .NET, so I'd just like some direction on what the best way of doing this would be. I've started this as a WPF application so would using a template be a good idea? Or if just dynamically creating form buttons with background images is an easy option then I'll give that a go.
You would probably need a ItemsControl such as a ListView. Unfortunately WPF only ships the GridView implementation, but the ListView was intended to support all those views you see in the Windows file explorer. For a Tiled based view you would need to override the ViewBase class and assign it to the View property of the ListView.
Years ago I have had sample code that demonstrated what you want.
The following link contains MSDN samples:
MSDN ListView.View samples
How to: Create a Custom View Mode
I know that the Xceed DataGrid has a built-in CardView mode. I don't know if it is available in the free version: Xceed WPF DataGrid documentation
Edit I just checked the MSDN samples and I think they are close to what you want.
I would go for ItemsControl. You need a class representing your buttons, with properties such as X, Y, ImageUri, and so on. You expose your generated buttons via ObservableCollection and bind it to ItemsSource of your ItemsControl. Then you change your ItemsPanelTemplate to grid:
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<!--Here go rows and columns definitions-->
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
If you have fixed number of rows and columns, you may add them directly in XAML, otherwise generate them at runtime in code-behind. You add ItemsContainerStyle for positioning:
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Y}" />
<Setter Property="Grid.Column" Value="{Binding X}" />
</Style>
</ItemsControl.ItemContainerStyle>
Also, you need ItemTemplate which will cover displaying button with image. Other options would be to use Canvas or UniformGrid as ItemsPanelTemplate (both with their advantages and disadvantages).
Could you tell me what is the main differences between Style and ControlTemplate ?
When or why to use one or the other ?
To my eyes, they are exactly the very same. As I am beginner I think that I am wrong, thus my question.
In a style you set properties of a control.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"/>
</Style>
<Button Style="{StaticResource MyButtonStyle}"/>
All buttons that use this style will have their Backgrounds set to Red.
In a template you define the UI (structure) of the control.
<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
<Grid>
<Rectangle Fill="Green"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
<Button Template="{StaticResource MyButtonTemplate}"/>
All buttons that use this template will have a green background that cannot be changed.
Values set in a template can only be replaced by replacing the entire template. Values in a style can be replaced by setting the value explicitly when using the control. That is why is better to use the properties of the control by using TemplateBinding instead of coding values.
<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
Now the template uses the value of the Background property of the button it is applied to, so it can be customized:
<Button Template="{StaticResource MyButtonTemplate}" Background="Yellow"/>
Another useful feature is that controls can pick up a default style without having a specific style being assigned to them. You can't do that with a template.
Just remove the x:Key attribute of the style (again: you can't do this with templates). All buttons in the visual tree below the style will have this style applied.
Combining Templates and Styles is extra powerful: you can set the Template property in the style:
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
No indeed you are quite wrong.
Styles set properties on controls. ControlTemplate is a property shared by most controls that specify how they are rendered.
To elaborate, you can use a style to group settings for a bunch of properties so you can re-use that to standardize your controls. Styles can be set explicitly on controls or applied too all of a certain type.
Control Templates can be set by a style or set explicitly on a control to change the way it appears. All controls have default templates (and styles for that matter) that are embedded in the .net wpf assemblies. It is quite enlightening to see these and understand how the wpf developers implemented the normal versions of all controls. If you have Expression blend installed, look in its "SystemThemes" folder.
UPDATE:
To understand how Styles and ControlTemplates can "add controls". In some way or another, the ControlTemplate is the only way to define the controls a control is made up of. But, some default .net controls allow you to use controls in place of text.
For example:
<GroupBox>
<GroupBox.Header>
<CheckBox/>
</GroupBox.Header>
</GroupBox>
This "adds" a checkbox to the groupbox without changing the ControlTemplate, but this is because the default ControlTemplate for GroupBox allows anything as the Header. This is done by using special controls such as ContentPresenter.
However, sometimes the default ControlTemplate for a control doesn't allow you to change something that you want to change via properties. Then you must change the ControlTemplate.
Whether you set the Properties of a control (Content, Header, ControlTemplate, IsEnabled, etc.) directly or via a style does not matter, Styles are only a convenience.
Hopefully this answers your question more clearly.
You can think of a Style as a convenient way to apply a set of property values to more than one element. You can change the default appearance by setting properties, such as FontSize and FontFamily, on each TextBlock element directly. However, if you want your TextBlock elements to share some properties, you can create a Style in the Resources section of your XAML file.
On the other hand, a ControlTemplate specifies the visual structure and visual behavior of a control. You can customize the appearance of a control by giving it a new ControlTemplate. When you create a ControlTemplate, you replace the appearance of an existing control without changing its functionality. For example, you can make the buttons in your application round instead of the default square shape, but the button will still raise the Click event.
Ref: http://msdn.microsoft.com/en-us/library/ms745683.aspx
I found some interesting differences in
The difference between styles and templates (msdn)
Style:
You can set only pre-existing properties in the style. For example, you cannot set a default value for a property that belongs to a new part that you added to the template.
Template:
When you modify a template, you have access to more parts of a control than when you modify a style. For example, you can change the way the pop-up list appears in a combo box, or you change the look of the button that triggers the pop-up list in the combo box by modifying the items template.
Style:
You can use styles to specify the default behavior of a control. For example, in a style for a button, you can specify a trigger so that when users move their mouse pointer over the button, the background color will change. These property changes are instantaneous (they cannot be animated gradually).
Template:
You can specify the behavior of any new and existing parts in a template by using triggers. For example, you can specify a trigger so that when users move their mouse pointer over a button, the color of one of the parts will change. These property changes can be instantaneous or animated gradually to produce a smooth transition.
OK, I had the exact same question and the answers I found in this thread pointed me in the right direction so I'm sharing, if only so I can understand it better myself.
A Style is more flexible than a ControlTemplate.
From Windows Presentation Foundation Unleashed, Adam Nathan and gang (writers) state this:
"Besides the convenience of combining a template [with a style using the Style's ControlTemplate setter] with arbitrary property settings, there are important advantages of doing this [setting the ControlTemplate setter on a style]:
It gives you the effect of default templates. For example, when a typed Style gets applied to elements by default, and that Style contains a custom control template, the control template gets applied without any explicitly markings on those elements.
It enables you to provide default yet overridable property valus that control the look of the template. In other words, it enables you to respect the templated parent's properties but still provide your own default values."
In other words, creating a style allows the user of the Style's Template setter to override the values set, even if they did not use a TemplateBinding ({TemplateBinding Width} for example). If you hardcoded the Width in your style, the user of the Style could still override it, but if you hardcoded that Width property in a Template, the user is stuck with it.
Also, (and this is kind of confusing) when using a ContentTemplate with a TemplateBinding the onus is on the user to set that property otherwise it will use the default property for the TargetType. If you use a style, you can override the default property of the TargetType by using a setter for the property and then applying a TemplateBinding referencing back to that setter. The book explains it better, page 338 (Mixing Templates with Styles)