Skip to content

[.NET 10] Implement image compression & MaximumWidth/MaximumHeight for MediaPicker #30027

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

Merged
jfversluis merged 25 commits into from
Jun 23, 2025
Merged

[.NET 10] Implement image compression & MaximumWidth/MaximumHeight for MediaPicker #30027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b25b640
Implement iOS and sample
jfversluis Jun 11, 2025
2327228
Implement Android
jfversluis Jun 13, 2025
66768aa
Fix Android implementation
jfversluis Jun 13, 2025
45e5f1a
Fix muliselect result Android
jfversluis Jun 16, 2025
64cd361
Fix publicapi
jfversluis Jun 16, 2025
6d1f2cf
Implement Windows
jfversluis Jun 16, 2025
769625c
Review feedback
jfversluis Jun 16, 2025
157b647
First implementation
jfversluis Jun 16, 2025
80771a1
Implement compression for picking
jfversluis Jun 17, 2025
d347df2
Fix sample
jfversluis Jun 17, 2025
c153d37
Fix Windows implementation
jfversluis Jun 17, 2025
587f7cc
Add MaximumWidth and MaximumHeight
jfversluis Jun 19, 2025
2b26a66
Fix publicapi
jfversluis Jun 19, 2025
1945abe
Fix comment: only applies to images
jfversluis Jun 19, 2025
861c923
Use MAUI Graphics for processing
jfversluis Jun 19, 2025
57af3c2
Fix netstandard and net10
jfversluis Jun 19, 2025
486ea60
Switch Windows implementation to MAUI Graphics
jfversluis Jun 19, 2025
16392a6
Improve platform support
jfversluis Jun 19, 2025
35dd7f3
Update MediaPicker.windows.cs
jfversluis Jun 19, 2025
4030b44
Update MediaPicker.windows.cs
jfversluis Jun 19, 2025
b2a5440
Windows revert back to platform APIs
jfversluis Jun 19, 2025
f93e2e1
Implement Windows again
jfversluis Jun 20, 2025
9e0861a
Really finally fix Windows
jfversluis Jun 20, 2025
02bca44
Fix merge error
jfversluis Jun 21, 2025
084dc49
Resolve another merge error
jfversluis Jun 21, 2025
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
236 changes: 209 additions & 27 deletions src/Essentials/samples/Samples/View/MediaPickerPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,219 @@
<viewmodels:MediaPickerViewModel />
</views:BasePage.BindingContext>

<Grid RowDefinitions="Auto,*">
<Label Text="Pick or capture a photo or video." FontAttributes="Bold" Margin="12" />
<ScrollView>
<VerticalStackLayout Padding="16" Spacing="20">

<!-- Settings Section -->
<Border BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#343A40}"
StrokeThickness="0"
Stroke="{AppThemeBinding Light=#DEE2E6, Dark=#495057}"
StrokeShape="RoundRectangle 12"
Padding="16">
<Border.Shadow>
<Shadow Brush="Black" Opacity="0.1" Radius="8" Offset="0,2" />
</Border.Shadow>
<VerticalStackLayout Spacing="16">
<Label Text="⚙️ Settings"
FontSize="16"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light=#495057, Dark=#F8F9FA}" />

<!-- Selection Limit -->
<Grid ColumnDefinitions="2*,Auto,80">
<Label Grid.Column="0"
Text="Selection Limit"
VerticalOptions="Center"
TextColor="{AppThemeBinding Light=#6C757D, Dark=#CED4DA}" />
<Stepper Grid.Column="1"
Value="{Binding PickerSelectionLimit, Mode=TwoWay}"
Minimum="1" Maximum="10" Increment="1" />
<Label Grid.Column="2"
Text="{Binding PickerSelectionLimit}"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Bold" />
</Grid>

<!-- Compression Quality -->
<Grid ColumnDefinitions="2*,Auto,80">
<Label Grid.Column="0"
Text="Compression Quality %"
VerticalOptions="Center"
TextColor="{AppThemeBinding Light=#6C757D, Dark=#CED4DA}" />
<Stepper Grid.Column="1"
Value="{Binding PickerCompressionQuality, Mode=TwoWay}"
Minimum="10" Maximum="100" Increment="10" />
<Label Grid.Column="2"
Text="{Binding PickerCompressionQuality}"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Bold" />
</Grid>

<!-- Maximum Width -->
<Grid ColumnDefinitions="2*,Auto,80">
<Label Grid.Column="0"
Text="Max Width (0 = original)"
VerticalOptions="Center"
TextColor="{AppThemeBinding Light=#6C757D, Dark=#CED4DA}" />
<Stepper Grid.Column="1"
Value="{Binding PickerMaximumWidth, Mode=TwoWay}"
Minimum="0" Maximum="4000" Increment="100" />
<Label Grid.Column="2"
Text="{Binding PickerMaximumWidth}"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Bold" />
</Grid>

<!-- Maximum Height -->
<Grid ColumnDefinitions="2*,Auto,80">
<Label Grid.Column="0"
Text="Max Height (0 = original)"
VerticalOptions="Center"
TextColor="{AppThemeBinding Light=#6C757D, Dark=#CED4DA}" />
<Stepper Grid.Column="1"
Value="{Binding PickerMaximumHeight, Mode=TwoWay}"
Minimum="0" Maximum="4000" Increment="100" />
<Label Grid.Column="2"
Text="{Binding PickerMaximumHeight}"
VerticalOptions="Center"
HorizontalOptions="Center"
FontAttributes="Bold" />
</Grid>
</VerticalStackLayout>
</Border>

<ScrollView Grid.Row="1">
<VerticalStackLayout Padding="12,0,12,12" Spacing="6">
<Label Text="Picker selection limit" HorizontalOptions="Center" />
<HorizontalStackLayout HorizontalOptions="Center" Spacing="10">
<Stepper Value="{Binding PickerSelectionLimit, Mode=TwoWay}" Minimum="0" Maximum="10" Increment="1" />
<Label Text="{Binding PickerSelectionLimit}" VerticalOptions="Center" />
</HorizontalStackLayout>
<Button Text="Pick photo" Command="{Binding PickPhotoCommand}" />
<Button Text="Capture photo" Command="{Binding CapturePhotoCommand}" />
<Button Text="Pick video" Command="{Binding PickVideoCommand}" />
<Button Text="Capture video" Command="{Binding CaptureVideoCommand}" />
<!-- Actions Section -->
<Border BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#343A40}"
StrokeThickness="0"
Stroke="{AppThemeBinding Light=#DEE2E6, Dark=#495057}"
StrokeShape="RoundRectangle 12"
Padding="16">
<Border.Shadow>
<Shadow Brush="Black" Opacity="0.1" Radius="8" Offset="0,2" />
</Border.Shadow>
<VerticalStackLayout Spacing="12">
<Label Text="📸 Actions"
FontSize="16"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light=#495057, Dark=#F8F9FA}" />

<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" ColumnSpacing="12" RowSpacing="12">
<Button Grid.Row="0" Grid.Column="0"
Text="📷 Pick Photo"
Command="{Binding PickPhotoCommand}"
BackgroundColor="{AppThemeBinding Light=#007BFF, Dark=#0D6EFD}"
TextColor="White" />
<Button Grid.Row="0" Grid.Column="1"
Text="📹 Capture Photo"
Command="{Binding CapturePhotoCommand}"
BackgroundColor="{AppThemeBinding Light=#28A745, Dark=#198754}"
TextColor="White" />
<Button Grid.Row="1" Grid.Column="0"
Text="🎬 Pick Video"
Command="{Binding PickVideoCommand}"
BackgroundColor="{AppThemeBinding Light=#DC3545, Dark=#DC3545}"
TextColor="White" />
<Button Grid.Row="1" Grid.Column="1"
Text="🎥 Capture Video"
Command="{Binding CaptureVideoCommand}"
BackgroundColor="{AppThemeBinding Light=#FD7E14, Dark=#FD7E14}"
TextColor="White" />
</Grid>
</VerticalStackLayout>
</Border>

<ScrollView Orientation="Horizontal" IsVisible="{Binding ShowMultiplePhotos}">
<HorizontalStackLayout
BindableLayout.ItemsSource="{Binding PhotoList}"
IsVisible="{Binding ShowMultiplePhotos}"
HeightRequest="300">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Image Source="{Binding .}" HeightRequest="300" WidthRequest="100" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
</ScrollView>
<!-- Multiple Photos Section -->
<Border BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#343A40}"
StrokeThickness="0"
Stroke="{AppThemeBinding Light=#DEE2E6, Dark=#495057}"
StrokeShape="RoundRectangle 12"
Padding="16"
IsVisible="{Binding ShowMultiplePhotos}">
<Border.Shadow>
<Shadow Brush="Black" Opacity="0.1" Radius="8" Offset="0,2" />
</Border.Shadow>
<VerticalStackLayout Spacing="12">
<Label Text="🖼️ Selected Photos"
FontSize="16"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light=#495057, Dark=#F8F9FA}" />

<ScrollView Orientation="Horizontal" HeightRequest="280">
<HorizontalStackLayout BindableLayout.ItemsSource="{Binding PhotoList}" Spacing="12">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Border BackgroundColor="{AppThemeBinding Light=#F8F9FA, Dark=#495057}"
StrokeThickness="1"
Stroke="{AppThemeBinding Light=#DEE2E6, Dark=#6C757D}"
StrokeShape="RoundRectangle 8"
Padding="8"
WidthRequest="160">
<VerticalStackLayout Spacing="4">
<Image Source="{Binding Source}"
HeightRequest="180"
WidthRequest="144"
Aspect="AspectFit"
VerticalOptions="Center" />
<Label Text="{Binding Dimensions}"
FontSize="10"
HorizontalOptions="Center"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light=#495057, Dark=#F8F9FA}"
LineBreakMode="NoWrap" />
<Label Text="{Binding FileSize}"
FontSize="9"
HorizontalOptions="Center"
FontAttributes="Italic"
TextColor="{AppThemeBinding Light=#6C757D, Dark=#CED4DA}"
LineBreakMode="NoWrap" />
</VerticalStackLayout>
</Border>
</DataTemplate>
</BindableLayout.ItemTemplate>
</HorizontalStackLayout>
</ScrollView>
</VerticalStackLayout>
</Border>

<Image Source="{Binding PhotoSource}" IsVisible="{Binding ShowPhoto}" HeightRequest="300"/>
<!-- Single Photo Section -->
<Border BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#343A40}"
StrokeThickness="0"
Stroke="{AppThemeBinding Light=#DEE2E6, Dark=#495057}"
StrokeShape="RoundRectangle 12"
Padding="16"
IsVisible="{Binding ShowPhoto}">
<Border.Shadow>
<Shadow Brush="Black" Opacity="0.1" Radius="8" Offset="0,2" />
</Border.Shadow>
<VerticalStackLayout Spacing="12" HorizontalOptions="Center">
<Label Text="📷 Selected Photo"
FontSize="16"
FontAttributes="Bold"
HorizontalOptions="Center"
TextColor="{AppThemeBinding Light=#495057, Dark=#F8F9FA}" />

<Border BackgroundColor="{AppThemeBinding Light=#F8F9FA, Dark=#495057}"
StrokeThickness="1"
Stroke="{AppThemeBinding Light=#DEE2E6, Dark=#6C757D}"
StrokeShape="RoundRectangle 8"
Padding="8">
<VerticalStackLayout Spacing="12">
<Image Source="{Binding PhotoSource}"
HeightRequest="300"
Aspect="AspectFit" />
<Label Text="{Binding ImageDimensions}"
FontSize="16"
HorizontalOptions="Center"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light=#495057, Dark=#F8F9FA}" />
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
</Grid>

</views:BasePage>
Loading
Loading