Merge pull request #65 from github/haacked/more-xaml-fixes

Styles for the combo boxes

src/GitHub.UI.Reactive/Assets/Controls.xaml

@@ -5,9 +5,11 @@
                     mc:Ignorable="d">
 
     <ResourceDictionary.MergedDictionaries>
-        <ResourceDictionary Source="..\Assets\Controls\Validation\UserErrorMessages.xaml" />
-        <ResourceDictionary Source="..\Assets\Controls\Validation\ValidationMessage.xaml" />
-        <ResourceDictionary Source="..\Assets\Controls\GitHubTabControl.xaml" />
+        <ResourceDictionary Source="Controls\Validation\UserErrorMessages.xaml" />
+        <ResourceDictionary Source="Controls\Validation\ValidationMessage.xaml" />
+        <ResourceDictionary Source="Controls\GitHubTabControl.xaml" />
+        <ResourceDictionary Source="Controls\FilteredComboBox.xaml" />
+        <ResourceDictionary Source="Controls\GitHubComboBox.xaml" />
     </ResourceDictionary.MergedDictionaries>
     
 </ResourceDictionary>

src/GitHub.UI.Reactive/Assets/Controls/FilteredComboBox.xaml

@@ -0,0 +1,116 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ui="clr-namespace:GitHub.UI;assembly=GitHub.UI"
+                    xmlns:uirx="clr-namespace:GitHub.UI">
+
+    <PathGeometry x:Key="arrow" Figures="M 0,448 224,768 448,448" />
+
+    <ControlTemplate x:Key="FilterComboBoxTemplate" TargetType="{x:Type uirx:FilteredComboBox}">
+        <Grid x:Name="MainGrid" SnapsToDevicePixels="true"
+              MinWidth="{Binding ActualWidth, ElementName=PART_Popup}"
+              Background="{TemplateBinding Background}">
+            <Popup x:Name="PART_Popup" 
+                   AllowsTransparency="true" 
+                   Grid.ColumnSpan="2" 
+                   MaxHeight="300"
+                   IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" 
+                   Margin="1"
+                   Placement="Custom">
+                <Border x:Name="dropDownBorder" BorderBrush="#CBCBCB"  BorderThickness="1" Background="{TemplateBinding Background}">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <Border Grid.Row="0"  BorderThickness="0,0,0,1"  BorderBrush="{TemplateBinding BorderBrush}" Background="#FCFCFC" Padding="5">
+                            <ui:FilterTextBox 
+                                x:Name="PART_FilterTextBox"
+                                PromptText="Filter" 
+                                Margin="0" 
+                                Text="{Binding FilterText, Mode=TwoWay, 
+                                    UpdateSourceTrigger=PropertyChanged, 
+                                    RelativeSource={RelativeSource TemplatedParent}}"/>
+                        </Border>
+                        <ScrollViewer CanContentScroll="true" Grid.Row="1">
+                            <ItemsPresenter 
+                                MinWidth="250"
+                                KeyboardNavigation.DirectionalNavigation="Contained"
+                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
+                        </ScrollViewer>
+                    </Grid>
+                </Border>
+            </Popup>
+            <ui:OcticonLinkToggleButton
+                x:Name="toggleButton"
+                Focusable="False"
+                PathChecked="{StaticResource arrow}"
+                PathUnchecked="{StaticResource arrow}"
+                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
+                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
+                Content="{TemplateBinding SelectionBoxItem}" 
+                ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
+                FontSize="12"
+                IconHeight="16"
+                IconWidth="8"
+                Margin="{TemplateBinding Padding}"
+                HorizontalContentAlignment="Left"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Background="Transparent"
+                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
+            </ui:OcticonLinkToggleButton>
+
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
+                <Setter Property="Margin" Value="1"/>
+                <!--<Setter Property="Color" Value="#f0f0f0"/>-->
+            </Trigger>
+            <Trigger Property="HasItems" Value="false">
+                <Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
+            </Trigger>
+            <Trigger Property="IsGrouping" Value="true">
+                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ui:IsLastItemInContainerConverter x:Key="IsLastItemInContainerConverter" />
+
+    <Style x:Key="GitHubComboBoxItem" TargetType="{x:Type ComboBoxItem}">
+        <Setter Property="Foreground" Value="{DynamicResource GHTextBrush}"/>
+        <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
+                    <Border x:Name="itemSeparator" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource GHBoxDividerBrush}">
+                        <Grid x:Name="templateRoot" Background="{TemplateBinding Background}">
+                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Height="20" Margin="5"/>
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource IsLastItemInContainerConverter}}" Value="true">
+                            <Setter Property="BorderThickness" Value="0" TargetName="itemSeparator"/>
+                        </DataTrigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="itemSeparator" Property="Background" Value="{DynamicResource GHBoxHoverBackgroundBrush}"/>
+                            <Setter TargetName="templateRoot" Property="Background" Value="{DynamicResource GHBoxHoverBackgroundBrush}"/>
+                        </Trigger>
+                        </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="GitHubFilterComboBox" TargetType="{x:Type uirx:FilteredComboBox}">
+        <Setter Property="Background" Value="White"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource GHBoxDividerBrush}"/>
+        <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonTextBrush}"/>
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
+        <Setter Property="Height" Value="24" />
+        <Setter Property="IsEditable" Value="false"/>
+        <Setter Property="Template" Value="{StaticResource FilterComboBoxTemplate}"/>
+        <Setter Property="ItemContainerStyle" Value="{StaticResource GitHubComboBoxItem}" />
+    </Style>
+
+</ResourceDictionary>

src/GitHub.UI.Reactive/Assets/Controls/GitHubComboBox.xaml

@@ -0,0 +1,104 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ui="clr-namespace:GitHub.UI;assembly=GitHub.UI">
+
+    <PathGeometry x:Key="arrow" Figures="M 0,448 224,768 448,448" />
+
+    <ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ui:GitHubComboBox}">
+        <Grid x:Name="MainGrid" SnapsToDevicePixels="true"
+              MinWidth="{Binding ActualWidth, ElementName=PART_Popup}"
+              Background="{TemplateBinding Background}">
+            <Popup x:Name="PART_Popup" 
+                   AllowsTransparency="true" 
+                   Grid.ColumnSpan="2" 
+                   MaxHeight="300"
+                   IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" 
+                   Margin="1"
+                   PlacementTarget="{Binding ElementName=MainGrid}"
+                   Placement="Custom">
+                <Border x:Name="dropDownBorder"
+                        BorderBrush="#CBCBCB"
+                        BorderThickness="1"
+                        Background="{TemplateBinding Background}">
+                    <ScrollViewer CanContentScroll="true">
+                        <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" 
+                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
+                    </ScrollViewer>
+                </Border>
+            </Popup>
+            <ui:OcticonLinkToggleButton
+                x:Name="toggleButton"
+                Focusable="True"
+                FocusVisualStyle="{DynamicResource NegativeMarginFocusVisual}"
+                PathChecked="{StaticResource arrow}"
+                PathUnchecked="{StaticResource arrow}"
+                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
+                ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
+                Content="{TemplateBinding SelectionBoxItem}" 
+                ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
+                FontSize="12"
+                IconHeight="16"
+                IconWidth="8"
+                Margin="{TemplateBinding Padding}"
+                HorizontalContentAlignment="Left"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Background="Transparent"
+                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
+            </ui:OcticonLinkToggleButton>
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
+                <Setter Property="Margin" Value="1"/>
+                <!--<Setter Property="Color" TargetName="shadow" Value="#f0f0f0"/>-->
+            </Trigger>
+            <Trigger Property="HasItems" Value="false">
+                <Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
+            </Trigger>
+            <Trigger Property="IsGrouping" Value="true">
+                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
+            </Trigger>
+        </ControlTemplate.Triggers>
+        
+    </ControlTemplate>
+    <ui:IsLastItemInContainerConverter x:Key="IsLastItemInContainerConverter" />
+
+    <Style x:Key="GitHubComboBoxItem" TargetType="{x:Type ComboBoxItem}">
+        <Setter Property="Foreground" Value="{DynamicResource GHTextBrush}"/>
+        <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
+                    <Border x:Name="itemSeparator" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource GHBoxDividerBrush}" Padding="5">
+                        <Grid x:Name="templateRoot" Background="{TemplateBinding Background}">
+                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Height="20" Margin="0,0,50,0" />
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource IsLastItemInContainerConverter}}" Value="true">
+                            <Setter Property="BorderThickness" Value="0" TargetName="itemSeparator"/>
+                        </DataTrigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="itemSeparator" Property="Background" Value="{DynamicResource GHBoxHoverBackgroundBrush}"/>
+                            <Setter TargetName="templateRoot" Property="Background" Value="{DynamicResource GHBoxHoverBackgroundBrush}"/>
+                        </Trigger>
+                        </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="GitHubComboBox" TargetType="{x:Type ui:GitHubComboBox}">
+        <Setter Property="Background" Value="White"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource GHBoxDividerBrush}"/>
+        <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonTextBrush}"/>
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="IsEditable" Value="false"/>
+        <Setter Property="IsReadOnly" Value="true" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>
+        <Setter Property="ItemContainerStyle" Value="{StaticResource GitHubComboBoxItem}" />
+    </Style>
+
+</ResourceDictionary>

src/GitHub.UI.Reactive/GitHub.UI.Reactive.csproj

@@ -104,6 +104,14 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Assets\Controls\FilteredComboBox.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="Assets\Controls\GitHubComboBox.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Assets\Controls\GitHubTabControl.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

src/GitHub.UI/Assets/Controls/GitHubLinkButton.xaml

@@ -2,11 +2,11 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <Style x:Key="GitHubBlueLinkButton" TargetType="{x:Type ButtonBase}">
-        <Setter Property="Foreground" Value="{StaticResource GHBlueLinkButtonTextBrush}" />
-        <Setter Property="BorderBrush" Value="{StaticResource GHBlueLinkButtonTextBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonTextBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource GHBlueLinkButtonTextBrush}" />
         <Setter Property="FontFamily" Value="{DynamicResource GitHubFontFamilyNormal}" />
         <Setter Property="FontSize" Value="14" />
-        <Setter Property="FocusVisualStyle" Value="{StaticResource NegativeMarginFocusVisual}" />
+        <Setter Property="FocusVisualStyle" Value="{DynamicResource NegativeMarginFocusVisual}" />
         <Setter Property="ToolTipService.ShowDuration" Value="30000" />
         <Setter Property="ToolTipService.ShowOnDisabled" Value="True" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
@@ -25,10 +25,10 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter Property="Foreground" Value="{StaticResource GHBlueLinkButtonHoverBrush}" />
+                            <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonHoverBrush}" />
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
-                            <Setter Property="Foreground" Value="{StaticResource GHBlueLinkButtonPressedBrush}" />
+                            <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonPressedBrush}" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>

src/GitHub.VisualStudio/UI/Views/Controls/CreateRepoControl.xaml

@@ -26,11 +26,10 @@
         <ui:HorizontalShadowDivider Width="120"/>
 
         <Grid
-            Margin="0,12,0,0"
+            Margin="40,12,40,0"
             FocusManager.IsFocusScope="True"
             x:Name="loginStackPanel"
-            FocusVisualStyle="{x:Null}"
-            >
+            FocusVisualStyle="{x:Null}">
 
             <Grid.Resources>
                 <Style TargetType="{x:Type TextBlock}">
@@ -45,15 +44,15 @@
                     <Setter Property="Padding" Value="0" />
                 </Style>
 
-                <Style TargetType="{x:Type ui:PromptTextBox}" BasedOn="{StaticResource RoundedPromptTextBox}">
+                <Style TargetType="{x:Type ui:PromptTextBox}">
                     <Setter Property="Margin" Value="0,5" />
                 </Style>
 
-                <Style TargetType="{x:Type ui:AppendingPathTextBox}" BasedOn="{StaticResource GitHubTextBox}">
+                <Style TargetType="{x:Type ui:AppendingPathTextBox}">
                     <Setter Property="Margin" Value="0,5" />
                 </Style>
 
-                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource GitHubBlueLinkButton}">
+                <Style TargetType="{x:Type Button}">
                     <Setter Property="Padding" Value="0" />
                     <Setter Property="VerticalContentAlignment" Value="Center" />
                 </Style>
@@ -110,25 +109,58 @@
                 </Grid.ColumnDefinitions>
 
                 <ui:AppendingPathTextBox x:Name="localPathText" Grid.Column="0" Grid.Row="0" />
-                <Button x:Name="browsePathButton" Grid.Column="1" Grid.Row="0" Margin="3,0,0,0">Browse</Button>
-
+                <Button
+                    x:Name="browsePathButton"
+                    Grid.Column="1"
+                    VerticalContentAlignment="Center"
+                    Grid.Row="0"
+                    Padding="0"
+                    Margin="3,0,0,0"
+                    Style="{StaticResource GitHubBlueLinkButton}">Browse</Button>
             </Grid>
 
             <!-- uirx:ValidationMessage x:Name="pathValidationMessage" Grid.Column="1" Grid.Row="4" ValidatesControl="{Binding ElementName=localPathText}"/ -->
 
             <Label Grid.Column="0" Grid.Row="5" Target="{Binding ElementName=ignoreTemplateList}">Git ignore</Label>
-            <uirx:FilteredComboBox x:Name="ignoreTemplateList" Grid.Column="1" Grid.Row="5" />
+            <uirx:FilteredComboBox
+                x:Name="ignoreTemplateList"
+                Grid.Column="1"
+                Grid.Row="5"
+                Style="{StaticResource GitHubFilterComboBox}">
+                <ComboBox.ItemTemplate>
+                    <DataTemplate>
+                        <TextBlock x:Name="itemName" Text="{Binding Name}" FontWeight="{Binding IsRecommended, Converter={ui:BooleanToFontWeightConverter}}"/>
+                        <DataTemplate.Triggers>
+                            <DataTrigger Binding="{Binding  RelativeSource={RelativeSource Mode=FindAncestor,  AncestorType=ComboBoxItem}}" Value="{x:Null}">
+                                <Setter TargetName="itemName" Property="FontWeight" Value="Normal" />
+                            </DataTrigger>
+                        </DataTemplate.Triggers>
+                    </DataTemplate>
+                </ComboBox.ItemTemplate>
+            </uirx:FilteredComboBox>
 
 
             <Label Grid.Column="0" Grid.Row="6" Target="{Binding ElementName=licenseList}">License</Label>
-            <uirx:FilteredComboBox x:Name="licenseList" Grid.Column="1" Grid.Row="6" />
+            <uirx:FilteredComboBox x:Name="licenseList" Grid.Column="1" Grid.Row="6" Style="{StaticResource GitHubFilterComboBox}" />
 
 
             <!-- uirx:UserErrorMessages x:Name="userErrorMessages" Grid.Column="0" Grid.ColumnSpan="2"  Grid.Row="7" / -->
 
             <ui:HorizontalShadowDivider Width="120" Grid.Row="8" Grid.ColumnSpan="2" Margin="0,12,0,12"/>
 
-            <ui:GitHubComboBox x:Name="accountsComboBox" Grid.Column="1" Grid.Row="9">
+            <ui:GitHubComboBox
+                x:Name="accountsComboBox"
+                Grid.Column="1"
+                Grid.Row="9"
+                Style="{StaticResource GitHubComboBox}">
+                <ComboBox.ItemTemplate>
+                    <DataTemplate>
+                        <StackPanel Orientation="Horizontal">
+                            <Image Source="{Binding Avatar}" Width="16" Height="16" RenderOptions.BitmapScalingMode="HighQuality" Margin="0,0,10,0" />
+                            <TextBlock Text="{Binding Login}"/>
+                        </StackPanel>
+                    </DataTemplate>
+                </ComboBox.ItemTemplate>
                 <ComboBox.ItemsSource>
                     <x:Array Type="sampleData:AccountDesigner">
                         <sampleData:AccountDesigner Login="Brendan" />