xaml

Control Template / Controls / UI / WPF / xaml — No Comments
27
Nov 10

Difference between UserControl and CustomControl in wpf

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.

C# / Editors / General Programming / Open Source / Tools / WPF / xaml — No Comments
27
Nov 10

Visual Studio Equivalent

For those who wish to write c# code and cannot afford to buy Visual Studio, you have “Sharp Develop“, a open source comparable to Visual Studio.

One more happy news, they even have a WPF designer is a quite awesome. Give it a try

Control Template / Controls / DoUNo / Tips 'n' Tricks / UI / WPF / xaml — No Comments
20
Jul 10

DoUNo: Whadds up with the Background property of a control

This is weird !! Try to customize the control template of a button,

  1. Place a grid as the base panel (don’t add any Background property to it)
  2. Add an ellipse and a content presenter to this
  3. Add a Click event handler to the button
  4. Run it and try to click on the white space, the event will not be raised !!!

Go back to the template,

  1. Add a Background property to the grid and set the value to Blue (can be any color other than transparent)
  2. Run it and try to click on the Blue color, the event will be raised !!!

Go back to the template,

  1. Set the value of the Background Property to Transparent
  2. Run it and try to click on the white space, the event will still be raised !!! (WHY ?!?)

Looks weird to me thou’

Control Template / Controls / UI / WPF / xaml — 2 Comments
12
Mar 10

ScrollBar control template in wpf

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.

  1. We start off altering the ControlTemplate of the ScrollBar.
  2. We place a grid as the base panel for the scroll bar and we divide it in to three rows, one for up arrow, one for track and one for down arrow.
  3. Then we add two repeat buttons to the top and the bottom most rows (up and down arrows).
  4. Now comes the middle row for the track. As mentioned earlier, a track is again composed of two repeat buttons (actually the partitions are made of buttons; really don’t know why) so we create those buttons and assign them the scroll bar related commands.
  5. We also add a thumb in the middle. Make sure that you don’t set any Height for the thumb as this is a vertical scroll bar (no width for the horizontal scroll bar). Don’t bother about the opacity that I have given for these controls. We are free to modify them.

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.

C# / DoUNo / UI / WPF / xaml — No Comments
1
Feb 10

DoUNo: XAML gets compiled in to a BAML

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.

Tips 'n' Tricks / UI / WPF / xaml — No Comments
13
Jan 10

Transparent background with opaque controls on top of it in wpf

Ever felt like having a transparent window background and still opaque controls inside the window? It can be easily done in wpf.

  1. Set the window’s AllowsTransparency to True
  2. Set the window’s Background to Transparent
  3. Add a Rectangle to the parent panel of the window
  4. Set the opacity of the rectangle to some value < 1 (0.7, …)
  5. Add your controls to the parent panel
  6. You are one step away form seeing a transparent background with opaque controls on top of it. Go ahead, run the application now

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>