如何在 Zebble 的视图中间显示图像

Question

我想创建这样的视图（将图像设置为页面中间）

我用这个代码

<TextView Id="HeaderIntro" Text="Your device heading from North is:" CssClass="header-intro" />
<TextView Id="Label" Text="waiting for compass..." />
<z-place inside="this" CssClass="CompassViewP">
  <ImageView Id="BackgroundImage" Path="Images/GeeksWhiteLogo.png"  />
  <ImageView Id="PointerImage" Path="Images/CompassPointer.png" Style.Visible="false" />
</z-place>

我写了css

    .CompassViewP {
    height: calc("(view.Parent.ActualHeight)");
    }
#BackgroundImage {
    background-position: center;
}

我试过其他 css 比如

position:absolute;
top: 50%;

和

 vertical-align: middle;

最后来看下吧

Answer 1

您的 ImageView 没有指定任何宽度和高度，因此它的大小来自图像文件。您正确地将其 background-position 设置为 center 但这还不够，因为它将在其宽度内居中，恰好与其宽度相同源图像大小。

所以对齐不会在视觉上改变任何东西，因为它周围没有水平间隙使 "center" 有意义。

要修复它，您应该将 ImageView 的宽度设置为 100%。最好也设置一个 Padding，以确保在较小的设备上它不会附着在侧面。垂直间隙也一样。

.CompassViewP {
    height: calc("(view.Parent.ActualHeight)");

    #BackgroundImage {
       background-position: center;
       width: 100%;
       height: 100%;
       padding: 50px;
   }
}

如何在 Zebble 的视图中间显示图像

How can I show an Image in middle of view in Zebble

css

sass

zebble

xamarin-zebble