Skip to content

Instantly share code, notes, and snippets.

@wyvernzora
Last active August 29, 2015 13:56
Show Gist options
  • Save wyvernzora/9182344 to your computer and use it in GitHub Desktop.
Save wyvernzora/9182344 to your computer and use it in GitHub Desktop.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="window" mc:Ignorable="d" x:Class="Launcher.MainWindow"
Title="MainWindow"
Height="520" Width="420"
WindowStyle="None" ResizeMode="NoResize"
Background ="Transparent" AllowsTransparency="True"
SnapsToDevicePixels="True">
<Window.Resources>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<BooleanToVisibilityConverter x:Key="BoolToVis" />
</Window.Resources>
<!-- Actual visible area of the window -->
<Border x:Name="wrapper" Margin="10" BorderThickness="1" BorderBrush="#FF838383">
<!-- Shadow around the window -->
<Border.Effect>
<DropShadowEffect ShadowDepth="0" Color="Black" BlurRadius="15"/>
</Border.Effect>
<!-- Main grid container -->
<Grid x:Name="mainGrid" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<!-- Firsr row (search icon, search text, menu button) -->
<Border x:Name="headerWrapper" Grid.Row="0" BorderThickness="0, 0, 0, 1" BorderBrush="#E5E5E5">
<Grid x:Name="headerGrid" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="17*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<!-- Search Textbox -->
<Grid x:Name="searchBarGrid" Grid.Column="1" Margin="0" VerticalAlignment="Center">
<!-- This TextBlock is the watermark behind the textbox -->
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="Search"
Foreground="#FF828282" FontSize="16" FontFamily="Segoe UI Semilight"
Margin="2,2" Visibility="{Binding Text.IsEmpty, Converter={StaticResource BoolToVis}, ElementName=SearchBox}"/>
<TextBox x:Name="SearchBox" TextWrapping="Wrap" Margin="0" VerticalAlignment="Center"
FontSize="16" FontFamily="Segoe UI Semilight" Background="{x:Null}"
BorderBrush="{x:Null}" BorderThickness="0"/>
</Grid>
<!-- Menu Button, icon inside is painted using 3 rectangles -->
<!-- Style is in the App.xaml -->
<Button x:Name="menuButton" Grid.Column="2" Margin="0" Width="25" Height="25"
Style="{DynamicResource BorderlessFadeInButton}" Background="{x:Null}" BorderBrush="{x:Null}">
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Center" Height="4"
Margin="0,0,0,12" VerticalAlignment="Center" Width="20" StrokeThickness="0"/>
<Rectangle Fill="Black" HorizontalAlignment="Center" Height="4"
Margin="0" VerticalAlignment="Center" Width="20" StrokeThickness="0"/>
<Rectangle Fill="Black" HorizontalAlignment="Center" Height="4"
Margin="0,12,0,0" VerticalAlignment="Center" Width="20" StrokeThickness="0"/>
</Grid>
</Button>
<!-- Search icon, not an image, painted in XAML instead -->
<Ellipse HorizontalAlignment="Left" Height="13.416" Margin="21.083,15.917,0,0"
StrokeThickness="2" VerticalAlignment="Top" Width="13.167" Stroke="#FF838383"/>
<Rectangle HorizontalAlignment="Left" Height="3.446" Margin="15.779,27.897,0,0"
StrokeThickness="2" VerticalAlignment="Top" Width="10.016" Fill="#FF838383" RenderTransformOrigin="0.5,0.5" RadiusX="2" RadiusY="2">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45.368"/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Border>
</Grid>
</Border>
</Window>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment