如何在 Xamarin 表格 pcl 的网格中插入背景图像

Posted 2023-04-13

【中文标题】如何在 Xamarin 表格 pcl 的网格中插入背景图像

【英文标题】：how to insert a background image in a grid of Xamarin forms pcl

【发布时间】：2017-05-04 10:21:58

【问题描述】：

我需要将背景放置到网格中，即 PNG 图像。 我在网上找不到具体的解决方案，你可以从 xaml 中添加它吗？还是必须通过c#来操作？

谢谢。

    <StackLayout VerticalOptions="FillAndExpand" x:Name="allContent" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="0">    
<Grid Grid.Row="1">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"></ColumnDefinition>
                <ColumnDefinition Width="6*"></ColumnDefinition>
                <ColumnDefinition Width="2*"></ColumnDefinition>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="1*"></RowDefinition>
                <RowDefinition Height="2*"></RowDefinition>
                <RowDefinition Height="2*"></RowDefinition>
                <RowDefinition Height="2*"></RowDefinition>
                <RowDefinition Height="2*"></RowDefinition>
              </Grid.RowDefinitions>
              <ActivityIndicator x:Name="loading" Grid.Row="0" Grid.Column="1" IsVisible="false" Color="#008ECC" IsRunning="true" />
              <Label TextColor="#fff" Grid.Row="1" Grid.Column="1" Text="" />
              <Entry FontSize="24" Grid.Row="1" Grid.Column="1" Placeholder="Username" x:Name="UsernameEntry" Text="" />
              <Label TextColor="#fff" Grid.Row="2" Grid.Column="1" Text="" />
              <Entry FontSize="24" Grid.Row="2" Grid.Column="1" Placeholder="Password" IsPassword="True" x:Name="PasswordEntry" Text="" />
              <Button x:Name="LoginButton" Grid.Row="3" Grid.Column="1" Text="Accedi" Clicked="Login_OnClicked"/>
              <Label TextColor="#fff" Text="Ricorda accesso" Grid.Row="3" Grid.Column="1"></Label>
              <Switch x:Name="switchRememberPassword" Grid.Row="4" Grid.Column="1"></Switch>              
              <Label x:Name="recuperaPassword" Grid.Row="4" Grid.Column="1" TextColor="#fff" Text="Recupera credenziali di accesso" FontSize="12"></Label>
            </Grid>
</StackLayout>

【参考方案1】：

您可以将其添加为 Grid 的子项，并添加属性 Grid.ColumnSpan 和 Grid.RowSpan 以跨越所有网格。例如：

     <Grid>
        <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="" Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
            <!-- My other properties here code here-->
     </Grid>

（此外，如果您的 Grid 在 ContentPage 上并且它占据了全屏，您可以使用页面的属性 BackgroundImage）

【讨论】：

这可能是将图像作为单元格/单元格背景的最简单的解决方案。就像一个魅力，希望有人对此表示赞同，我早些时候看过它，因为我在相关布局上浪费了很多时间。

【参考方案2】：

<RelativeLayout>
<Image Aspect="Fill" Source="Jupiter.png" Opacity="0.3"
            RelativeLayout.WidthConstraint=
              "ConstraintExpression Type=RelativeToParent, Property=Width"
            RelativeLayout.HeightConstraint=
              "ConstraintExpression Type=RelativeToParent, Property=Height"/>
<Grid RelativeLayout.WidthConstraint=
          "ConstraintExpression Type=RelativeToParent, Property=Width"
        RelativeLayout.HeightConstraint=
          "ConstraintExpression Type=RelativeToParent, Property=Height">

  <Label Text="Hello world from XAML" VerticalOptions="Center"
     HorizontalOptions="Center" FontSize="30"/>
</Grid>

【讨论】：

不要使用这个解决方案，我已经在答案中更新了我的代码，因为网格在 stacklayout 内

图片没有变高，只有变宽，怎么回事？

我在图像上添加了 Aspect="Fill"，现在可以使用，请编辑您的代码并添加 aspect="fill"。

我已经编辑了我的代码，如果你真的有帮助的话，请给我的代码打分

【参考方案3】：

您可以为此使用RelativeLayout

    <RelativeLayout>
       <Image Source="backgroundimage"   RelativeLayout.WidthConstraint="ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1" 
     RelativeLayout.HeightConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1" />
       <Grid RelativeLayout.WidthConstraint="ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1" 
     RelativeLayout.HeightConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1"> 

//Your grid content


       </Grid>
    </RelativeLayout>

【讨论】：

我已经尝试过这个解决方案，但我不是全貌，我怎样才能让它全宽和全高？

【参考方案4】：

Xamarin Forms XAML 上没有 ImageBrush，也没有 gridView.. 只是类似的 Grid 布局，目前它只接受背景颜色

要添加图像，您应该执行以下操作：

<Grid>
<Image Source="imgBackground.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"/>
</Grid>