Customize Appearance

These questions are based on 70-502 CSHP – TS – Microsoft .NET Framework 3.5: Windows Presentation Foundation (C# .NET)
Microsoft
Self Test Software Practice Test


Objective: Customize appearance.
Sub-objective: Change the appearance of a control by using templates.


Multiple answer, multiple-choice


You are using the Microsoft .NET 3.5 Framework.


You are developing a Windows Presentation Foundation (WPF) application to manage customer surveys for a marketing firm. You have designed a window to allow employees to add audio and video comments on each survey report. The record buttons should display as red circles rather than displaying as standard buttons.


Which two actions should you take? (Choose two. Each answer is part of the complete solution.)



  1. Add the following markup to the window’s resource section:
    <ControlTemplate x:Key=”RedCircleTemplate” TargetType=”{x:Type Button}”>
     <Grid>
     <Ellipse Width=”{DynamicResource Button.Width}”
     Height=”{DynamicResource Button.Width}”
     Fill=”Red” Stroke=”Black” />
     <Border VerticalAlignment=”Center” HorizontalAlignment=”Center”
     BorderBrush=”White” Background=”White”>
     <TextBlock Margin=”2″>Record</TextBlock>
     </Border>
     </Grid>
    </ControlTemplate>
  2. Add the following markup to the window’s resource section:
    <ControlTemplate x:Key=”RedCircleTemplate” TargetType=”{x:Type Button}”>
     <Grid>
     <Ellipse Width=”{Binding Source=Button, Path=Width}”
     Height=”=”{Binding Source=Button, Path=Width}”
     Fill=”Red” Stroke=”Black” />
     <Border VerticalAlignment=”Center” HorizontalAlignment=”Center”
     BorderBrush=”White” Background=”White”>
     <AdornedElementPlaceholder Margin=”2″ />
     </Border>
     </Grid>
    </ControlTemplate>
  3. Add the following markup to the window’s resource section:
    <ControlTemplate x:Key=”RedCircleTemplate” TargetType=”{x:Type Button}”>
     <Grid>
     <Ellipse Width=”{TemplateBinding Width}”
     Height=”{TemplateBinding Width}”
     Fill=”Red” Stroke=”Black” />
     <Border VerticalAlignment=”Center” HorizontalAlignment=”Center”
     BorderBrush=”White” Background=”White”>
     <ContentPresenter Margin=”2″ />
     </Border>
     </Grid>
    </ControlTemplate>
  4. Add the following markup for the video and audio record buttons:
    <Button Name=”RecordAudio”
     Style=”{StaticResource RedCircleTemplate}” Width=”50″>
     Audio
    </Button>
    <Button Name=”RecordVideo”
     Style=”{StaticResource RedCircleTemplate}” Width=”50″>
     Video
    </Button>
  5. Add the following markup for the video and audio record buttons:
    <Button Name=”RecordAudio”
     Template=”{StaticResource RedCircleTemplate}” Width=”50″>
     Audio
    </Button>
    <Button Name=”RecordVideo”
     Template=”{StaticResource RedCircleTemplate}” Width=”50″>
     Video
    </Button>
  6. Add the following markup for the video and audio record buttons:
    <Button Name=”RecordAudio”
     ContentTemplate=”{StaticResource RedCircleTemplate}” Width=”50″>
     Audio
    </Button>
    <Button Name=”RecordVideo”
     ContentTemplate=”{StaticResource RedCircleTemplate}” Width=”50″>
     Video
    </Button>

Answer:



  1. Add the following markup to the window’s resource section:
    <ControlTemplate x:Key=”RedCircleTemplate” TargetType=”{x:Type Button}”>
     <Grid>
     <Ellipse Width=”{TemplateBinding Width}”
     Height=”{TemplateBinding Width}”
     Fill=”Red” Stroke=”Black” />
     <Border VerticalAlignment=”Center” HorizontalAlignment=”Center”
     BorderBrush=”White” Background=”White”>
     <ContentPresenter Margin=”2″ />
     </Border>
     </Grid>
    </ControlTemplate>


  1. Add the following markup for the video and audio record buttons:
    <Button Name=”RecordAudio”
     Template=”{StaticResource RedCircleTemplate}” Width=”50″>
     Audio
    </Button>
    <Button Name=”RecordVideo”
     Template=”{StaticResource RedCircleTemplate}” Width=”50″>
     Video
    </Button>

Tutorial:
You should add the following markup in the resources section of the application to configure the control template to be used for buttons:


<ControlTemplate x:Key=”RedCircleTemplate” TargetType=”{x:Type Button}”>
 <Grid>
 <Ellipse Width=”{TemplateBinding Width}”
 Height=”{TemplateBinding Width}”
 Fill=”Red” Stroke=”Black” />
 <Border VerticalAlignment=”Center” HorizontalAlignment=”Center”
 BorderBrush=”White” Background=”White”>
 <ContentPresenter Margin=”2″ />
 </Border>
 </Grid>
</ControlTemplate>


When creating a control template for a Button control, you can specify the shape of the button to be an ellipse by using the Ellipse element. A circle is an ellipse with the same width as height. You can specify the height and width of the ellipse by using a special type of binding called TemplateBinding that is used to bind a property of the control with the value originally set for the property of the control.


In the given scenario, the Height and Width property of the Ellipse element used for creating a button is set to 50 pixels, which is the value of the Width property of the Button controls named RecordVideo and RecordAudio. The ContentPresenter element is used in a ControlTemplate template to specify the position at which the content would be placed on a control and generate the User Interface (UI) for a control. The AdornedElementPlaceholder element is used in the ControlTemplate element to specify the position at which an adorned control is placed. This position is specified in relation to the other elements that are specified in the ControlTemplate template.


You should also add the following markup in the application to add the record buttons to the application:


<Button Name=”RecordAudio”
 Template=”{StaticResource RedCircleTemplate}” Width=”50″>
 Audio
</Button>
<Button Name=”RecordVideo”
 Template=”{StaticResource RedCircleTemplate}” Width=”50″>
 Video
</Button>


The Template element of the control is used to specify the ControlTemplate template to be applied on the control. The x:Key element specified in the ControlTemplate template should be specified in the Template element of the Control to indicate the ControlTemplate template to be used. The StaticResource attribute is used to indicate the ControlTemplate template is specified within the resource section of the application.


You can customize the default appearance and behavior of a control using the ControlTemplate element. To customize the appearance of items within an ItemsControl, such as a ComboBox or ListBox control, you would use the ItemsPanelTemplate element. The IsItemsHost property is used to specify to which panel items are added.


When specifying a new control template, all default markup and actions associated with a control are replaced. When replacing a control template, you will need to use placeholders for its content. The following elements are used:



  • ContentPresenter: Represents the entire contents within a simpl

    Like what you see? Share it.Share on Google+Share on LinkedInShare on FacebookShare on RedditTweet about this on TwitterEmail this to someone
cmadmin

ABOUT THE AUTHOR

Posted in Archive|

Comment:

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>