Posted By

asim1985 on 06/05/13


Tagged

xaml


Versions (?)

ChatHead UserControl


 / Published in: XML
 

URL: http://asimmittal.net

XAML layout for my chat head user control

  1. <UserControl x:Class="UserControls.ChatHead"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6. mc:Ignorable="d"
  7. d:DesignHeight="480" d:DesignWidth="480"
  8. Loaded="UserControl_Loaded_1"
  9. SizeChanged="UserControl_SizeChanged_1">
  10.  
  11. <Grid x:Name="LayoutRoot" Background="Transparent">
  12.  
  13. <!-- Ellipse that will define the outline -->
  14. <Ellipse Name="outline" Fill="LightGray" Width="Auto" Height="Auto"
  15. HorizontalAlignment="Center" VerticalAlignment="Center"
  16. />
  17.  
  18. <!-- The user's profile pic -->
  19. <Image Name="image" Margin="0" Stretch="UniformToFill" />
  20.  
  21. <!-- Notification label -->
  22. <Border Name="notification" Background="#FFABABAB"
  23. HorizontalAlignment="Left" VerticalAlignment="Top"
  24. >
  25. <!-- Stackpanel with a mild gradient for background -->
  26. <StackPanel Margin="1" Height="35" Width="25">
  27. <StackPanel.Background>
  28. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  29. <GradientStop Color="#FFC10202" Offset="0"/>
  30. <GradientStop Color="#FFE50000" Offset="1"/>
  31. </LinearGradientBrush>
  32. </StackPanel.Background>
  33. <!-- Text block for the label -->
  34. <TextBlock Name="txtNotification" Text="5" FontSize="24"
  35. FontFamily="Segoe UI Semibold" Foreground="White"
  36. HorizontalAlignment="Center" VerticalAlignment="Center"
  37. />
  38. </StackPanel>
  39. </Border>
  40.  
  41. </Grid>
  42. </UserControl>

Report this snippet  

You need to login to post a comment.