ignoring margin on dektop

Question

In my Maui app, I have a customBorderStyle, that my

DeskTopTemplate

is ignoring completely

  <ContentPage.Resources>
      <DataTemplate
          x:Key="PhoneTemplate"
          x:DataType="{x:Null}">
          <SwipeView Threshold="300">
              <SwipeView.RightItems>
                  <SwipeItems Mode="Execute">
                      <SwipeItem
                          BackgroundColor="{AppThemeBinding Dark={x:StaticResource SwipeDark},
                                                            Light={x:StaticResource SwipeLight}}"
                          Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                          CommandParameter="{Binding Source={x:Reference BorderContaier}}">
                          <SwipeItem.IconImageSource>
                              <FontImageSource
                                  FontFamily="ma"
                                  Glyph="{x:Static constant:MaterialFonts.Delete}" />
                          </SwipeItem.IconImageSource>
                      </SwipeItem>
                  </SwipeItems>
              </SwipeView.RightItems>
              <Border
                  x:Name="BorderContaier"
                  Style="{x:StaticResource CommonBorderStyle}">
                  <controls:TurbineData
                      TurbineAddres="{Binding Turbine.Address}"
                      TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                      TurbineName="{Binding Turbine.Name}" />
              </Border>
          </SwipeView>
      </DataTemplate>
      <DataTemplate
          x:Key="DeskTopTemplate"
          x:DataType="{x:Null}">
          <Border
              x:Name="borderContainer"
              Style="{x:StaticResource CommonBorderStyle}">
              <Grid
                  x:Name="GridContainer"
                  ColumnDefinitions="*,*">
                  <controls:TurbineData
                      Grid.ColumnSpan="2"
                      TurbineAddres="{Binding Turbine.Address}"
                      TurbineCreationDate="{Binding Turbine.LocalizedInstalationDateTime}"
                      TurbineName="{Binding Turbine.Name}" />
                  <Button
                      Grid.RowSpan="3"
                      Grid.Column="1"
                      Command="{Binding DeleteTurbineCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                      CommandParameter="{Binding Source={x:Reference borderContainer}}"
                      HeightRequest="{Binding Height, Source={x:Reference GridContainer}}"
                      IsVisible="{Binding IsDeleteButtonVisible, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}"
                      Style="{x:StaticResource DeleteButtonStyle}"
                      Text="{x:Static constant:MaterialFonts.Delete}" />
              </Grid>
              <Border.GestureRecognizers>
                  <PointerGestureRecognizer PointerEnteredCommand="{Binding MouseEnterCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
                  <PointerGestureRecognizer PointerExitedCommand="{Binding MouseLeaveCommand, Source={x:RelativeSource AncestorType={x:Type vm:TurbinesCollectionPageViewModel}}}" />
              </Border.GestureRecognizers>
          </Border>
      </DataTemplate>
      <local:DeviceDataTemplateSelector
          x:Key="SelectDataTemplateSelector"
          DeskTopTemplate="{StaticResource DeskTopTemplate}"
          PhoneTemplate="{StaticResource PhoneTemplate}" />
  </ContentPage.Resources>
  <Grid>
      <CollectionView
          x:Name="TurbineCollection"
          Margin="10"
          ItemTemplate="{StaticResource SelectDataTemplateSelector}"
          ItemsSource="{Binding Turbines}" />

  <Style
     x:Key="CommonBorderStyle"
     TargetType="Border">
     <Setter Property="StrokeShape" Value="RoundRectangle 10" />
     <Setter Property="Margin" Value="0,10,0,0" />
     <Setter Property="Background" Value="{AppThemeBinding Dark={x:StaticResource AndoidDark}, Light=White}" />
 </Style>

https://reccloud.com/u/4nj3a0j

Platform affected: Windows

.Net 8

Maui 8.0.1

Visual Studio 2022 17.11

Answer 1

Hello,

For customizing the platform-specific UI, you can use the OnPlatfrom feature to quickly accomplish this requirement.

For the Margin property, since you have to fill in multiple values at once, you need to include it in single quotes for it to take effect.

Please refer to the following documentation and examples:

• Customize UI appearance based on the platform and device idiom.

<Setter Property="Margin" Value="{OnPlatform WinUI='0', Default='66,100,0,0' }" />

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.