Skip to content

Commit 084573a

Browse files
linnealovespielinnealovespie
committed
Finalized reponsive design for new demo
1 parent fbe40f3 commit 084573a

File tree

2 files changed

+218
-162
lines changed

2 files changed

+218
-162
lines changed

‎Samples/StyleTransfer/MainPage.xaml‎

Lines changed: 213 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,222 @@
1-
<Page
1+
<!--
2+
*@@@+++@@@@******************************************************************
3+
4+
Microsoft Windows Media Foundation
5+
Copyright (C) Microsoft Corporation. All rights reserved.
6+
7+
*@@@+++@@@@******************************************************************
8+
-->
9+
<Page
210
x:Class="StyleTransfer.MainPage"
311
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
412
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
513
xmlns:local="using:StyleTransfer"
614
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
715
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8-
mc:Ignorable="d"
9-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
10-
<Page.Resources>
11-
<DataTemplate x:Key="ModelSelectionStyle">
12-
<TextBlock FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
13-
</DataTemplate>
14-
<Style x:Key="TextBlockStyling" TargetType="TextBlock">
15-
<Setter Property="Foreground" Value="Black"/>
16-
</Style>
17-
</Page.Resources>
18-
19-
<RelativePanel Margin="10,0,0,10" >
20-
<TextBlock x:Name="TitleTextBlock" Text="Style Transfer Demo" FontSize="24" Width="223" Margin="24,0,0,24"/>
21-
<Grid Name="InputControlGrid" RelativePanel.Below="TitleTextBlock" HorizontalAlignment="Center" RelativePanel.AlignHorizontalCenterWithPanel="True" Padding="10,0,10,0" >
22-
<Grid.ColumnDefinitions>
23-
<ColumnDefinition Width="Auto"/>
24-
<ColumnDefinition Width="Auto" />
25-
<ColumnDefinition Width="Auto"/>
26-
</Grid.ColumnDefinitions>
27-
<Grid.RowDefinitions>
28-
<RowDefinition Height="Auto" />
29-
<RowDefinition Height="Auto" />
30-
</Grid.RowDefinitions>
31-
32-
<TextBlock Text="Input Device" FontSize="16" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
33-
<TextBlock Text="Input Media" FontSize="16" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" />
34-
<TextBlock Text="Input Model" FontSize="16" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" />
35-
36-
<ListBox Name="UIStyleList" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2" ItemsSource="{x:Bind modelFileNames}" Margin="5,0,5,0">
37-
<ListBox.ItemsPanel>
38-
<ItemsPanelTemplate>
39-
<VirtualizingStackPanel Orientation="Horizontal"/>
40-
</ItemsPanelTemplate>
41-
</ListBox.ItemsPanel>
42-
</ListBox>
43-
44-
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Width="154" VerticalAlignment="Top" Height="{Binding ActualHeight, ElementName=UIStyleList}" Margin="5,0,5,0">
45-
<Button Name="UIButtonLiveStream"
46-
ToolTipService.ToolTip="Camera preview">
47-
<Button.Content>
48-
<SymbolIcon Symbol="Video"/>
49-
</Button.Content>
50-
</Button>
51-
<Button Name="UIButtonAcquireImage"
52-
ToolTipService.ToolTip="Take a photo">
53-
<Button.Content>
54-
<SymbolIcon Symbol="Camera"/>
55-
</Button.Content>
56-
</Button>
57-
<Button Name="UIButtonFilePick"
58-
ToolTipService.ToolTip="Select an image from a file">
59-
<Button.Content>
60-
<SymbolIcon Symbol="OpenFile"/>
61-
</Button.Content>
62-
</Button>
63-
<Button Name="UIButtonInking"
64-
ToolTipService.ToolTip="Draw on a canvas">
65-
<Button.Content>
66-
<SymbolIcon Symbol="Edit"/>
67-
</Button.Content>
68-
</Button>
69-
</StackPanel>
70-
<ToggleSwitch Name="UIToggleInferenceDevice"
71-
OnContent="GPU"
72-
OffContent="CPU"
73-
IsOn="True" HorizontalContentAlignment="Center" Width="100" VerticalAlignment="Top" Grid.Row="1" HorizontalAlignment="Center" />
74-
</Grid>
75-
<Grid RelativePanel.Below="InputControlGrid" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,25,0,0" Name="MediaDisplayGrid">
76-
<Grid.ColumnDefinitions>
77-
<ColumnDefinition Width="200*"/>
78-
<ColumnDefinition Width="200*"/>
79-
</Grid.ColumnDefinitions>
80-
<Grid.RowDefinitions>
81-
<RowDefinition Height="300*"></RowDefinition>
82-
</Grid.RowDefinitions>
83-
84-
<Viewbox Stretch="Uniform">
85-
<StackPanel Name="UIInkControls"
86-
Visibility="Collapsed"
87-
Grid.Column="0">
88-
<InkToolbar TargetInkCanvas="{x:Bind UIInkCanvasInput}" VerticalAlignment="Top" />
89-
90-
<!--inking canvas-->
91-
<Viewbox Stretch="Uniform"
92-
MaxWidth="720"
93-
MaxHeight="720">
94-
<Grid BorderBrush="Black"
95-
BorderThickness="1">
96-
<Grid Name="UIInkGrid"
97-
Background="Black"
98-
MinWidth="200"
99-
MinHeight="200"
100-
MaxWidth="720"
101-
MaxHeight="720">
102-
<InkCanvas Name="UIInkCanvasInput"/>
103-
</Grid>
16+
mc:Ignorable="d">
17+
18+
<Page.Resources>
19+
<SolidColorBrush x:Key="TranslucentBlackBrush" Color="Black" Opacity="0.3"/>
20+
<Style x:Key="TextBlockStyling" TargetType="TextBlock">
21+
<Setter Property="Foreground" Value="Black"/>
22+
</Style>
23+
</Page.Resources>
24+
25+
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
26+
27+
<Grid>
28+
<Grid.RowDefinitions>
29+
<RowDefinition Height="100"/>
30+
<RowDefinition Height="300*"/>
31+
<RowDefinition Height="30"/>
32+
</Grid.RowDefinitions>
33+
34+
<!--Status and result display-->
35+
<Grid Name="InputControlGrid" HorizontalAlignment="Center" Padding="10,0,10,0" >
36+
<Grid.ColumnDefinitions>
37+
<ColumnDefinition Width="Auto"/>
38+
<ColumnDefinition Width="Auto" />
39+
<ColumnDefinition Width="Auto" />
40+
</Grid.ColumnDefinitions>
41+
<Grid.RowDefinitions>
42+
<RowDefinition Height="Auto" />
43+
<RowDefinition Height="Auto"/>
44+
<RowDefinition Height="Auto" />
45+
</Grid.RowDefinitions>
46+
47+
<TextBlock Text="Input Device" FontSize="16" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
48+
<TextBlock Text="Input Media" FontSize="16" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center"/>
49+
<TextBlock Text="Input Style" FontSize="16" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center"/>
50+
51+
<TextBlock Text="3. Choose a device to use for style transfer."
52+
FontSize="10"
53+
Grid.Row="2" Grid.Column="2"
54+
HorizontalAlignment="Center"
55+
VerticalAlignment="Top"
56+
TextWrapping="WrapWholeWords"
57+
Width="{Binding ActualWidth, ElementName=UIToggleInferenceDevice}"
58+
Margin="5,0,5,0" SelectionChanged="TextBlock_SelectionChanged"/>
59+
<TextBlock Text="1. Start by choosing a media source to transform."
60+
FontSize="10"
61+
Grid.Row="2" Grid.Column="0"
62+
HorizontalAlignment="Center"
63+
TextWrapping="WrapWholeWords"
64+
Width="{Binding ActualWidth, ElementName=InputMediaList}" VerticalAlignment="Top" Margin="5,0,5,0"/>
65+
<TextBlock Text="2. Select a style to apply by loading a specific model."
66+
FontSize="10"
67+
Grid.Row="2" Grid.Column="1"
68+
HorizontalAlignment="Center"
69+
TextWrapping="WrapWholeWords"
70+
Width="{Binding ActualWidth, ElementName=UIStyleList}" VerticalAlignment="Top" Margin="5,0,5,0"/>
71+
72+
<ListBox Name="UIStyleList" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1" ItemsSource="{x:Bind modelFileNames}" Margin="5,0,5,0">
73+
<ListBox.ItemsPanel>
74+
<ItemsPanelTemplate>
75+
<VirtualizingStackPanel Orientation="Horizontal"/>
76+
</ItemsPanelTemplate>
77+
</ListBox.ItemsPanel>
78+
</ListBox>
79+
80+
<StackPanel
81+
Name="InputMediaList"
82+
Orientation="Horizontal"
83+
Grid.Row="1" Grid.Column="0"
84+
HorizontalAlignment="Center"
85+
VerticalAlignment="Top"
86+
Height="{Binding ActualHeight, ElementName=UIStyleList}"
87+
>
88+
<Button Name="UIButtonLiveStream"
89+
ToolTipService.ToolTip="Camera preview">
90+
<Button.Content>
91+
<SymbolIcon Symbol="Video"/>
92+
</Button.Content>
93+
</Button>
94+
<Button Name="UIButtonAcquireImage"
95+
ToolTipService.ToolTip="Take a photo">
96+
<Button.Content>
97+
<SymbolIcon Symbol="Camera"/>
98+
</Button.Content>
99+
</Button>
100+
<Button Name="UIButtonFilePick"
101+
ToolTipService.ToolTip="Select an image from a file">
102+
<Button.Content>
103+
<SymbolIcon Symbol="OpenFile"/>
104+
</Button.Content>
105+
</Button>
106+
<Button Name="UIButtonInking"
107+
ToolTipService.ToolTip="Draw on a canvas">
108+
<Button.Content>
109+
<SymbolIcon Symbol="Edit"/>
110+
</Button.Content>
111+
</Button>
112+
</StackPanel>
113+
<ToggleSwitch Name="UIToggleInferenceDevice"
114+
OnContent="GPU"
115+
OffContent="CPU"
116+
IsOn="True" HorizontalContentAlignment="Center" Width="100" VerticalAlignment="Top" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" />
104117
</Grid>
105-
</Viewbox>
106-
</StackPanel>
107-
</Viewbox>
108-
109-
<Viewbox Stretch="Uniform" Grid.Column="0">
110-
<Image Name="UIInputImage"
111-
Grid.Column="0"
112-
Stretch="Uniform"
113-
MaxHeight="720"
114-
MaxWidth="720" Source="/Assets/Input.jpg"/>
115-
</Viewbox>
116-
<Viewbox Stretch="Uniform" Grid.Column="0" VerticalAlignment="Stretch">
117-
<MediaPlayerElement Name="UIMediaPlayerElement"
118-
Stretch="Uniform"
119-
AreTransportControlsEnabled="False"
120-
Canvas.ZIndex="-1"
121-
Grid.Column="0"
122-
MaxHeight="720"
123-
MaxWidth="720"/>
124-
</Viewbox>
125-
126-
<Viewbox Stretch="Uniform" Grid.Column="1">
127-
<Image Name="UIResultImage"
128-
Grid.Column="1"
129-
Stretch="Uniform"
130-
Source="/Assets/Output.jpg"
131-
MaxHeight="720"
132-
MaxWidth="720"/>
133-
</Viewbox>
134-
</Grid>
135-
<StackPanel Name="UICameraSelectionControls" Orientation="vertical" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" RelativePanel.Below="MediaDisplayGrid" RelativePanel.AlignLeftWithPanel="True">
136-
<TextBlock Text="Camera: " Style="{StaticResource TextBlockStyling}"/>
137-
<ComboBox Name="UICmbCamera" Foreground="White" >
138-
<ComboBox.Background>
139-
<SolidColorBrush Color="Black" Opacity="0.3"/>
140-
</ComboBox.Background>
141-
</ComboBox>
142-
<TextBlock Text="Preview resolution: " Style="{StaticResource TextBlockStyling}"/>
143-
<TextBlock Name="UITxtBlockPreviewProperties" Text="0x0" Style="{StaticResource TextBlockStyling}"/>
144-
</StackPanel>
145-
146-
<Button Name="UIButtonSaveImage"
147-
ToolTipService.ToolTip="Save the image result to a file"
148-
IsEnabled="false"
149-
Background="#FF939393"
150-
HorizontalAlignment="Right" VerticalAlignment="Top" RelativePanel.Below="MediaDisplayGrid" RelativePanel.AlignRightWithPanel="True">
151-
<Button.Content>
152-
<SymbolIcon Symbol="Save"/>
153-
</Button.Content>
154-
</Button>
155-
<Grid Name="FPSDisplayGrid" RelativePanel.Below="MediaDisplayGrid" HorizontalAlignment="Center" RelativePanel.AlignHorizontalCenterWithPanel="True" Padding="10,0,10,0" >
156-
<Grid.ColumnDefinitions>
157-
<ColumnDefinition Width="Auto"/>
158-
<ColumnDefinition Width="Auto" />
159-
</Grid.ColumnDefinitions>
160-
<Grid.RowDefinitions>
161-
<RowDefinition Height="Auto" />
162-
<RowDefinition Height="Auto" />
163-
</Grid.RowDefinitions>
164-
<TextBlock Grid.Row="0" Grid.Column="0">Capture FPS</TextBlock>
165-
<TextBlock Grid.Row="1" Grid.Column="0" Text="{x:Bind dummyFPS}"></TextBlock>
166-
167-
<TextBlock Grid.Row="0" Grid.Column="1">Render FPS</TextBlock>
168-
<TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind dummyFPS}"></TextBlock>
118+
<!--<StackPanel Orientation="Horizontal">-->
119+
120+
<!--<Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1">-->
121+
<Grid Grid.Row="1">
122+
<Grid.ColumnDefinitions>
123+
<ColumnDefinition Width="200*"/>
124+
<ColumnDefinition Width="200*"/>
125+
</Grid.ColumnDefinitions>
126+
127+
<Viewbox Stretch="Uniform">
128+
<StackPanel Name="UIInkControls"
129+
Visibility="Collapsed"
130+
Grid.Column="0">
131+
<InkToolbar TargetInkCanvas="{x:Bind UIInkCanvasInput}" VerticalAlignment="Top" />
132+
133+
<!--inking canvas-->
134+
<Viewbox Stretch="Uniform"
135+
MaxWidth="720"
136+
MaxHeight="720">
137+
<Grid BorderBrush="Black"
138+
BorderThickness="1">
139+
<Grid Name="UIInkGrid"
140+
Background="White"
141+
MinWidth="200"
142+
MinHeight="200"
143+
MaxWidth="720"
144+
MaxHeight="720">
145+
<InkCanvas Name="UIInkCanvasInput"/>
146+
</Grid>
147+
</Grid>
148+
</Viewbox>
149+
</StackPanel>
150+
</Viewbox>
151+
152+
<!--Camera preview-->
153+
<MediaPlayerElement Name="UIMediaPlayerElement"
154+
Stretch="Uniform"
155+
AreTransportControlsEnabled="False"
156+
Canvas.ZIndex="-1"
157+
MaxWidth="720"
158+
MaxHeight="720"
159+
Grid.Column="0"/>
160+
161+
<Image Name="UIInputImage"
162+
Grid.Column="0"
163+
Stretch="Uniform"
164+
MaxWidth="720"
165+
MaxHeight="720" Source="/Assets/Input.jpg"/>
166+
<!--Output image panel-->
167+
<Grid Grid.Column="1" VerticalAlignment="Stretch">
168+
169+
<Image Name="UIResultImage"
170+
Stretch="Uniform"
171+
MaxWidth="720"
172+
MaxHeight="720" Source="/Assets/Output.jpg"/>
173+
174+
<Button Name="UIButtonSaveImage"
175+
ToolTipService.ToolTip="Save the image result to a file"
176+
IsEnabled="false"
177+
Background="#FF939393"
178+
HorizontalAlignment="Right" VerticalAlignment="Bottom">
179+
<Button.Content>
180+
<SymbolIcon Symbol="Save"/>
181+
</Button.Content>
182+
</Button>
183+
</Grid>
184+
</Grid>
185+
<!--</Viewbox>-->
186+
187+
<StackPanel Name="UICameraSelectionControls" Orientation="vertical" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Row="1">
188+
<TextBlock Text="Camera: " Style="{StaticResource TextBlockStyling}"/>
189+
<ComboBox Name="UICmbCamera" Foreground="White" >
190+
<ComboBox.Background>
191+
<SolidColorBrush Color="Black" Opacity="0.3"/>
192+
</ComboBox.Background>
193+
</ComboBox>
194+
<TextBlock Text="Preview resolution: " Style="{StaticResource TextBlockStyling}"/>
195+
<TextBlock Name="UITxtBlockPreviewProperties" Text="0x0" Style="{StaticResource TextBlockStyling}"/>
196+
</StackPanel>
197+
198+
<ProgressRing Name="UIProcessingProgressRing"
199+
MaxWidth="720"
200+
MaxHeight="720"
201+
IsActive="true"
202+
Visibility="Visible"
203+
HorizontalAlignment="Left"
204+
Grid.Row="2"
205+
Margin="10,0,0,0" Foreground="#FF02487F"/>
206+
<Border x:Name="UIStatusBorder" Grid.Row="2" Background="#CC348508">
207+
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
208+
<TextBlock Margin="0,0,10,0" Visibility="Visible">
209+
<Run FontWeight="Bold">Capture FPS</Run>
210+
<Run Text="{x:Bind dummyFPS}"></Run>
211+
</TextBlock>
212+
<TextBlock Margin="10,0,0,0" Visibility="Visible">
213+
<Run FontWeight="Bold">Render FPS</Run>
214+
<Run Text="{x:Bind dummyFPS}" FontWeight="Normal"></Run>
215+
</TextBlock>
216+
</StackPanel>
217+
</Border>
218+
219+
</Grid>
220+
169221
</Grid>
170-
</RelativePanel>
171222
</Page>

‎Samples/StyleTransfer/MainPage.xaml.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,10 @@ public MainPage()
3434
{
3535
this.InitializeComponent();
3636
}
37+
38+
private void TextBlock_SelectionChanged(object sender, RoutedEventArgs e)
39+
{
40+
41+
}
3742
}
3843
}

0 commit comments

Comments
 (0)