Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Omnipresent samples app search #15194

Closed
wants to merge 3 commits into from
Closed

Omnipresent samples app search #15194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f3f802
chore: Make tab bar more fluent
MartinZikmund Jan 23, 2024
d2e015e
chore: Adjusting Search box style
MartinZikmund Jan 23, 2024
7910020
refactor: Update the layout of Samples app
MartinZikmund Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 105 additions & 115 deletions ...App/SamplesApp.UnitTests.Shared/Controls/UITests/Views/Controls/SampleChooserControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,19 @@
<Style x:Key="BaseTitleGridContainerStyle"
TargetType="Grid">
<Setter Property="BorderBrush"
Value="{StaticResource Color05Brush}" />
Value="{ThemeResource Color05Brush}" />
<Setter Property="BorderThickness"
Value="0,0,0,1" />
<Setter Property="Background"
Value="{StaticResource ApplicationPageBackgroundThemeBrush}" />
Value="{ThemeResource ControlFillColorDefaultBrush}" />
<Setter Property="Height"
Value="50" />
</Style>

<Style x:Key="BaseTitleContainerStyle"
TargetType="Border">
<Setter Property="BorderBrush"
Value="{StaticResource Color05Brush}" />
Value="{ThemeResource Color05Brush}" />
<Setter Property="BorderThickness"
Value="0,0,0,1" />
<Setter Property="HorizontalAlignment"
Expand All @@ -75,13 +75,13 @@
TargetType="Border"
BasedOn="{StaticResource BaseTitleContainerStyle}">
<Setter Property="MinHeight"
Value="{StaticResource TitleContainerHeight}" />
Value="{ThemeResource TitleContainerHeight}" />
</Style>

<Style x:Key="TemplateContainerStyle"
TargetType="Border">
<Setter Property="BorderBrush"
Value="{StaticResource Color05Brush}" />
Value="{ThemeResource Color05Brush}" />
<Setter Property="BorderThickness"
Value="0,0,0,1" />
<Setter Property="Margin"
Expand Down Expand Up @@ -139,15 +139,22 @@
</DataTemplate>

<DataTemplate x:Key="SamplesList">
<ListView ItemsSource="{Binding SampleContents}"
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<ListView Grid.Row="1" ItemsSource="{Binding SampleContents}"
SelectedItem="{Binding SelectedLibrarySample, Mode=TwoWay}"
ItemTemplate="{StaticResource SampleTemplate}"
ItemContainerStyle="{StaticResource SampleChooserListViewItemStyle}"
Style="{StaticResource StretchedListViewStyle}"
helper:ListViewBaseCommand.Command="{Binding ShowNewSectionCommand}"
helper:ListViewBaseCommand.CommandParameter="SamplesContent"
ub:SplitViewBehavior.CloseOnClick="True">
</ListView>
</ListView>
</Grid>
</DataTemplate>

<DataTemplate x:Key="FavoritesList">
Expand Down Expand Up @@ -181,12 +188,6 @@
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<TextBox Text="{Binding SearchTerm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource SearchTextBoxStyle}"
KeyDown="OnSearchEnterKey_KeyDown"
PlaceholderText="Search"
Margin="8" />

<ListView Grid.Row="1"
ItemsSource="{Binding FilteredSamples}"
SelectedItem="{Binding SelectedSearchSample, Mode=TwoWay}"
Expand Down Expand Up @@ -259,123 +260,135 @@
toolkit:VisibleBoundsPadding.PaddingMask="All">

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- LIBRARY (Categories)-->
<Grid Style="{StaticResource BaseTitleGridContainerStyle}"
<!-- Title area -->

<Grid>
<Grid Style="{StaticResource BaseTitleGridContainerStyle}" BorderThickness="0"
Visibility="{Binding CategoryVisibility, Converter={StaticResource TrueToVisible}}">

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- Runtime tests button -->
<Button Style="{StaticResource IconButtonStyle}"
<!-- Runtime tests button -->
<Button Style="{StaticResource IconButtonStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Command="{Binding OpenRuntimeTestsCommand}">
<u:PathControl Style="{StaticResource Icon_RuntimeTests}"
Margin="5,0" />
</Button>
<Button Style="{StaticResource IconButtonStyle}"
Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Command="{Binding CreateNewWindowCommand}">
<FontIcon Glyph="&#xE8A7;" />
</Button>

<!-- Title -->
<TextBlock
<FontIcon Glyph="&#xE9F9;" Foreground="{StaticResource Color06Brush}" />
</Button>

<!-- Create new window button -->
<Button Style="{StaticResource IconButtonStyle}"
Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Command="{Binding CreateNewWindowCommand}">
<FontIcon Glyph="&#xE8A7;" />
</Button>

<!-- Title -->
<TextBlock
Grid.Column="2"
Style="{StaticResource Typo03}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Library" />

<!-- Record All Tests Button -->
<Button
<!-- Record All Tests Button -->
<Button
Grid.Column="3"
Style="{StaticResource IconButtonStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Command="{Binding RecordAllTestsCommand}">
<u:PathControl Style="{StaticResource Icon_RunAll}"
Margin="5,0" />
</Button>
<FontIcon Glyph="&#xEC58;" Foreground="{StaticResource Color06Brush}" />
</Button>
</Grid>

<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Visibility="{Binding SampleVisibility, Converter={StaticResource TrueToVisible}}"
ContentTemplate="{StaticResource SamplesTitle}" />

<Grid Style="{StaticResource BaseTitleGridContainerStyle}" BorderThickness="0"
Visibility="{Binding FavoritesVisibility, Converter={StaticResource TrueToVisible}}">
<TextBlock Style="{StaticResource Typo03}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Favorites" />
</Grid>

<Grid Style="{StaticResource BaseTitleGridContainerStyle}" BorderThickness="0"
Visibility="{Binding RecentsVisibility, Converter={StaticResource TrueToVisible}}">
<TextBlock Style="{StaticResource Typo03}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Recents" />
</Grid>

</Grid>
<ContentControl ContentTemplate="{StaticResource CategoriesList}"
Grid.Row="1"

<!-- Search box -->

<Grid Grid.Row="1" Style="{StaticResource BaseTitleGridContainerStyle}">
<TextBox Text="{Binding SearchTerm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource SearchTextBoxStyle}"
KeyDown="OnSearchEnterKey_KeyDown"
PlaceholderText="Search"
Margin="8,0,8,8" />
</Grid>

<!-- Lists-->

<Grid Grid.Row="2">

<!-- Categories -->
<ContentControl ContentTemplate="{StaticResource CategoriesList}"

HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Visibility="{Binding CategoryVisibility, Converter={StaticResource TrueToVisible}}" />

<!--SAMPLES-->
<ContentControl HorizontalContentAlignment="Stretch"
<!-- Samples -->
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Visibility="{Binding SampleVisibility, Converter={StaticResource TrueToVisible}}"
ContentTemplate="{StaticResource SamplesTitle}" />
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Grid.Row="1"
Grid.Row="2"
Visibility="{Binding SampleVisibility, Converter={StaticResource TrueToVisible}}"
ContentTemplate="{StaticResource SamplesList}" />

<!--FAVORITES-->
<Grid Style="{StaticResource BaseTitleGridContainerStyle}"
Visibility="{Binding FavoritesVisibility, Converter={StaticResource TrueToVisible}}">
<TextBlock Style="{StaticResource Typo03}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Favorites" />
</Grid>
<ContentControl HorizontalContentAlignment="Stretch"
<!-- Favorites -->
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Grid.Row="1"
Grid.Row="2"
Visibility="{Binding FavoritesVisibility, Converter={StaticResource TrueToVisible}}"
ContentTemplate="{StaticResource FavoritesList}" />

<!--RECENTS-->
<Grid Style="{StaticResource BaseTitleGridContainerStyle}"
Visibility="{Binding RecentsVisibility, Converter={StaticResource TrueToVisible}}">
<TextBlock Style="{StaticResource Typo03}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Recents" />
</Grid>
<ContentControl HorizontalContentAlignment="Stretch"
<!-- Recents -->
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Grid.Row="1"
Visibility="{Binding RecentsVisibility, Converter={StaticResource TrueToVisible}}"
ContentTemplate="{StaticResource RecentSamplesList}" />

<!--SEARCH-->
<Grid Style="{StaticResource BaseTitleGridContainerStyle}"
Visibility="{Binding SearchVisibility, Converter={StaticResource TrueToVisible}}">
<TextBlock Style="{StaticResource Typo03}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="Search" />
</Grid>
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Grid.Row="1"
Visibility="{Binding SearchVisibility, Converter={StaticResource TrueToVisible}}"
ContentTemplate="{StaticResource SearchList}" />

<!--NAVIGATION BUTTONS-->
<Border Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
<!-- Bottom tab bar -->

<Border Background="{ThemeResource ControlFillColorDefaultBrush}"
BorderThickness="0,1,0,0"
BorderBrush="{StaticResource Color05Brush}"
Height="50"
Grid.Row="2">
Height="56"
Padding="0,4,0,4"
Grid.Row="3">
<u:StarStackPanel VerticalAlignment="Stretch"
Sizes="*,*,*,*"
Orientation="Horizontal">
Expand All @@ -388,12 +401,10 @@
Command="{Binding ShowNewSectionCommand}"
CommandParameter="Library">
<Grid>
<u:PathControl Style="{StaticResource Icon_Section_Library}"
VerticalAlignment="Top"
Margin="{StaticResource NavIconMargin}" />
<FontIcon Glyph="&#xE1D3;" VerticalAlignment="Top" />
<TextBlock Style="{StaticResource Typo06}"
VerticalAlignment="Bottom"
Text="LIBRARY" />
Text="Library" />
</Grid>
</RadioButton>

Expand All @@ -404,12 +415,10 @@
Command="{Binding ShowNewSectionCommand}"
CommandParameter="Favorites">
<Grid>
<u:PathControl Style="{StaticResource Icon_Section_Favorites}"
VerticalAlignment="Top"
Margin="{StaticResource NavIconMargin}" />
<FontIcon Glyph="&#xE728;" VerticalAlignment="Top" />
<TextBlock Style="{StaticResource Typo06}"
VerticalAlignment="Bottom"
Text="FAVS" />
Text="Favorites" />
</Grid>
</RadioButton>

Expand All @@ -420,29 +429,10 @@
Command="{Binding ShowNewSectionCommand}"
CommandParameter="Recents">
<Grid>
<u:PathControl Style="{StaticResource Icon_Section_Recents}"
VerticalAlignment="Top"
Margin="{StaticResource NavIconMargin}" />
<TextBlock Style="{StaticResource Typo06}"
VerticalAlignment="Bottom"
Text="RECENTS" />
</Grid>
</RadioButton>

<RadioButton GroupName="SelectedSectionPhone"
Style="{StaticResource SampleChooserNavRadioButtonStyle}"
VerticalContentAlignment="Stretch"
Foreground="{Binding SearchSelected, Converter={StaticResource TabActiveColorForeground}}"
IsChecked="{Binding SearchSelected, Mode=TwoWay}"
Command="{Binding ShowNewSectionCommand}"
CommandParameter="Search">
<Grid VerticalAlignment="Stretch">
<u:PathControl Style="{StaticResource Icon_Section_Search}"
VerticalAlignment="Top"
Margin="{StaticResource NavIconMargin}" />
<FontIcon Glyph="&#xE81C;" VerticalAlignment="Top" />
<TextBlock Style="{StaticResource Typo06}"
VerticalAlignment="Bottom"
Text="SEARCH" />
Text="Recents" />
</Grid>
</RadioButton>
</u:StarStackPanel>
Expand Down
10 changes: 4 additions & 6 deletions ...amplesApp/SamplesApp.UnitTests.Shared/Controls/UITests/Views/Styles/Controls/TextBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="16"
Grid.ColumnSpan="3"
Grid.Row="1"
Grid.RowSpan="1" />
Expand All @@ -135,15 +136,12 @@
Content="{TemplateBinding Header}"
Foreground="{StaticResource Color04Brush}"
FontWeight="Normal"
Margin="0,0,0,8"
Margin="0,0,0,0"
Grid.Row="0"
Visibility="Collapsed"
x:DeferLoadStrategy="Lazy" />

<u:PathControl Style="{StaticResource Icon_Search}"
Grid.Row="1"
Margin="8,0,0,0"
VerticalAlignment="Center" />
<FontIcon Glyph="&#xE721;" FontSize="14" Grid.Row="1" Margin="8,0,0,0" />

<ScrollViewer x:Name="ContentElement"
AutomationProperties.AccessibilityView="Raw"
Expand Down Expand Up @@ -190,4 +188,4 @@
</Setter>
</Style>

</ResourceDictionary>
</ResourceDictionary>
Loading