ApplicationBar is not a FrameworkElment and is not bindable. Which implies that if you are so much used to MVVM and wants to bind things to ApplicationBar, its not easy; you need to create your own ApplicationBar.
This sounds pretty lame and I really don’t know why Microsoft is not interested in creating an ApplicationBar that is bindable.
Ever wondered the difference between UserControl and CustomControl.
UserControl is a composite control. We use UserControl when you want to group similar controls and reuse them across multiple windows/pages. UserControl is not considered as a single control by the logical tree. i.e., if the UserControl contains three buttons and a list box and when this UserControl is used in window, the logical tree of the window can identify each of there controls (buttons and list box).
CustomControl is a single control with a control template located in the “Themes->Generic.xaml” file. When CustomControls are used in a window/page, the logical tree cannot identify its internals. For example, if you want to use snip control (a control that has up and down buttons to scroll values in a textbox), then create a custom control that inherit from Control class and give it a theme (default ControlTenplate).
Okay, now when to use what ??
If you are writing a CustomControl, its template can always be overridden. Which means, if you want to ship a control as a library and if you want it to be customizable by others, then go for CustomControl. Otherwise, its simple, go ahead and use a UserControl
Hope you got the difference now.
This is weird !! Try to customize the control template of a button,
Go back to the template,
Go back to the template,
Looks weird to me thou’
Won’t it be cool to have ones own scroll bar. Felling the same, I did a quick peek in to msdn and there was a sample scroll bar template. The example is really good, but it did not talk about the internals of a scroll bar. So i thought I will write about it.
The two arrows that you see at the ends are called RepeatButtons. The middle field (light grayish one) is called Track. The middle, movable portion in the track is called Thumb and the partitions to the left and the right of the thumb are two more repeat buttons.
I have named these controls with some number so that it can easily be related to the code.
<!-- We are going to alter the vertical scroll bar's template --> <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}"> <!-- First up is the background panel for all the above mentioned controls --> <Grid Background="Transparent"> <Grid.RowDefinitions> <RowDefinition MaxHeight="50"/> <!-- Up arrow row --> <RowDefinition Height="0.00001*"/> <!-- Track row --> <RowDefinition MaxHeight="50"/> <!-- Down arrow row --> </Grid.RowDefinitions> <Border Grid.RowSpan="3" CornerRadius="2" Background="DarkGray" Opacity="1" /> <!-- Border for the scroll bar --> <RepeatButton Grid.Row="0" Command="ScrollBar.LineUpCommand" Width="30" Height="30">Up</RepeatButton> <!-- Repeat button 1 (up arrow) --> <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true"> <!-- Track --> <Track.DecreaseRepeatButton> <RepeatButton Command="ScrollBar.PageUpCommand" Opacity="0" /> <!-- Repeat button 3 (left partition) --> </Track.DecreaseRepeatButton> <Track.Thumb> <Thumb Margin="1,0,1,0" Background="Transparent" Opacity="0.3" Width="20" /> <!-- Thumb --> </Track.Thumb> <Track.IncreaseRepeatButton> <RepeatButton Command="ScrollBar.PageDownCommand" Opacity="0" /> <!-- Repeat button 4 (right partition) --> </Track.IncreaseRepeatButton> </Track> <RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Width="30" Height="30">Down</RepeatButton> <!-- Repeat button 2 (down arrow) --> </Grid> </ControlTemplate>
I hope the above snippet is self explanatory, still a bit of explanation.
After the control template creation modification, we need to assign this to our scroll bar.
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}"> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="OverridesDefaultStyle" Value="true"/> <Style.Triggers> <Trigger Property="Orientation" Value="Vertical"> <!-- Our scroll bar is a vertical one. Thats why --> <Setter Property="Width" Value="18"/> <Setter Property="Height" Value="Auto" /> <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" /> </Trigger> </Style.Triggers> </Style>
Thats it. You have successfully altered a scroll bar.
Update — Don’t try changing the PART_Track. Changing the name will lead to an incomplete scroll bar as that name has been used by .NET WPF framework.
What does a xaml file gets compiled in to ? It gets compiled in to a baml (binary xaml). More @ wikipedia.
You can find the .baml file in the \obj\Debug folder.
Ever felt like having a transparent window background and still opaque controls inside the window? It can be easily done in wpf.
Sample window,
<Window x:Class=”BackgroundWindow.Transparent.Samples.WPF.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Window1″ Height=”300″ Width=”300″ AllowsTransparency=”True” Background=”Transparent” WindowStyle=”None”>
<Grid>
<Rectangle Fill=”Gray” Opacity=”0.7″ />
<Button Width=”100″ Height=”100″>Click this on</Button>
</Grid>
</Window>
WPF, out of the box doesn’t have provision for MDI windows. The reason is quite simple, MDI windows are outdated and most of the applications have been using tabbed documents, proving they are really easy to use. Although the framework is flexible enough for you to make such a feature, its better to move to tab based interface.
Every time I try adding a default animation (Slide, Fade, …) to a pop up in WPF, I find it not to be working. Today, I went thru’ MSDN (breaking my laziness 
) and found that the popup animation shall work only if the AllowsTransparency of the popup is set to true. Really weird !!
Recently I had a trouble displaying some values in a custom painted ListViewControl. I had to display some numbers right aligned. But I mistook this alignment with direction of the string, leading me to write the code as,
theArgs.Graphics.DrawString("100", FONT_ISOVALUE_VALUE, Brushes.Black, new Point(theArgs.Bounds.X + LOCATION_X_OFFSET, theArgs.Bounds.Y + LOCATION_Y_OFFSET), new StringFormat(StringFormatFlags.DirectionRightToLeft));
This was working properly for positive values, but for negative values, the – sign comes after the number. i.e., instead of -100, it was displayed as 100-, thats when I understood the difference between RightToLeft text and right aligned texts. So replacing the above snippet with the following snippet does the work.
StringFormat aStringFormat = new StringFormat(); aStringFormat.Alignment = StringAlignment.Far; theArgs.Graphics.DrawString("-100", FONT_ISOVALUE_VALUE, Brushes.Black, new Point(theArgs.Bounds.X + LOCATION_X_OFFSET, theArgs.Bounds.Y + LOCATION_Y_OFFSET), aStringFormat );
So alignment is different and direction of text is different. Use StringFormat.Alignment for alignment and StringFormatFlags for direction
In my previous post I had written about StackPanel. One big disadvantage with the StackPanel was with the wrapping part. It cannot wrap controls / contents when it overflows. Thats why we have the WrapPanel. This is StackPanel + Wrap enabled. The following example may help you understand this better.
Consider that you have a stack panel with 7 buttons arranged in a horizontal fashion and if your window’s width is smaller than the sum of seven button’s width, then this how it looks
<Window x:Class="LayoutsTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" VerticalAlignment="Center" />
<Button Content="Button2" VerticalAlignment="Center" />
<Button Content="Button3" VerticalAlignment="Center" />
<Button Content="Button4" VerticalAlignment="Center" />
<Button Content="Button5" VerticalAlignment="Center" />
<Button Content="Button6" VerticalAlignment="Center" />
<Button Content="Button7" VerticalAlignment="Center" />
</StackPanel>
</Window>
A close substitute for this problem will be a WrapPanel.
<Window x:Class="LayoutsTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<WrapPanel Orientation="Horizontal">
<Button Content="Button1" VerticalAlignment="Center" />
<Button Content="Button2" VerticalAlignment="Center" />
<Button Content="Button3" VerticalAlignment="Center" />
<Button Content="Button4" VerticalAlignment="Center" />
<Button Content="Button5" VerticalAlignment="Center" />
<Button Content="Button6" VerticalAlignment="Center" />
<Button Content="Button7" VerticalAlignment="Center" />
</WrapPanel>
</Window>
Although this solves the Wrap problem of the stack panel, still we cannot place two controls paralle to each other using this panel.
