固定大小的UIElement带有窗口大小调整折叠问题

时间:2018-09-17 16:31:54

标签: c# xaml uwp adaptive-design

我正在使用UWP开发应用程序。我对UI元素设计有疑问。
在开始解释我的情况之前,我将展示我的应用程序问题的确切含义。

bottom of advertise is collapsed
如您所见,广告的底部已折叠一半。

我尝试添加HorizontalAlignmentVerticalAlignment拉伸,但是没有用。

我想使自己的广告Grid具有页面优先级,因此看起来完全是这样。

我的意思是,有更多的广告空间,而更少的ListView项目空间。

我试图通过声明* XAML VisualState* but It seems not enough for me. I don't want to spend my time with struggling with constant number ( Height , Width`来处理这种情况。

在解决这个问题时,我可以找到自适应布局存储库(C#/ Xaml)。 该应用的图片如下。 githubLink

picture

我想关注该资料来源,因为它的确非常好。但资料来源包括一些动画部分和一些高级技能,我无法追上。

我只想展示我的广告。而且我想最大化广告的宽度,而又不会崩溃,并且留有足够的利润。并且我希望我的广告始终位于应用程序的底部。

很抱歉,如果您觉得这个问题不明确。
我的资料如下。

ShellPage.xaml

<Grid>
    <Frame x:Name="shellFrame" /> <!-- navigation frame -->
</Grid>

MainPage.xaml

<Page
    x:Class="nlotto_gen.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mods="using:nlotto_gen.Models"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">

    <Grid
        x:Name="ContentArea"
        Margin="{StaticResource MediumLeftRightMargin}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="reallongwst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1200"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="adsense.Width" Value="1080"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="longwst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="adsense.Width" Value="728"/>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="longhst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="700"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mMain_Button.(Grid.Row)" Value="1"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="shorthst">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="220"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="mMain_Button.(Grid.Row)" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            BorderBrush="{ThemeResource AppBarBorderThemeBrush}"
            x:Name="myGrid"
            BorderThickness="2" >

            <!--The SystemControlPageBackgroundChromeLowBrush background represents where you should place your content. 
                Place your content here.-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="5*"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <ListView>
                <!--... omitted ...-->
            </ListView>
            <Button Grid.Column="1" Grid.Row="1" x:Uid="Main_Button" x:Name="mMain_Button" Command="{x:Bind ViewModel.game_create}" Style="{StaticResource myButton}"/>
            <UI:AdControl
                Grid.Row="2"
                Grid.ColumnSpan="2"
                x:Name="adsense"
                ApplicationId="****"
                AdUnitId="test"
                Width="728"
                Height="80"
                Margin="5, 5, 5, 5"/>
        </Grid>
    </Grid>
</Page>

2 个答案:

答案 0 :(得分:2)

您必须将第三个-- TABLES create table t1 ( serial_number integer primary key, current_location varchar ); create table t2 ( some_id bigserial primary key, status integer ); create table t3 ( serial_number integer REFERENCES t1(serial_number), some_id integer REFERENCES t2(some_id), unique(serial_number, some_id) ); -- TRIGGER create or replace function trigger_update_currentlocation() returns trigger as $body$ begin -- If SUBQUERY status is deployed (0), retrieved (1), or lost (2), then update t1 with appropriate current_location. -- THIS IS WHAT FAILS - SQL does not recognize 'SUBQUERY.status' in each if/elseif statement. update t1 if SUBQUERY.status = 0 then set t1.current_location = 'Deployed' elseif SUBQUERY.status = 1 then set t1.current_location = 'Retrieved' elseif SUBQUERY.status = 2 then set t1.current_location = 'Lost' -- This joins t3 and t2 in order to select only serial_numbers with a status. Column `some_id` does not exist in t1 and thus can't be used to join t1 to t3 directly. from ( select t3.serial_number, t2.status from t2 inner join t3 on t2.some_id = t3.some_id ) as SUBQUERY -- This matches SUBQUERY serial number to t1 serial number, so that only the appropriate rows in t1 are updated. where SUBQUERY.serial_number = t1.serial_number; end; $body$ language plpgsql; CREATE TRIGGER "deployLocations" AFTER update ON t2 FOR EACH ROW EXECUTE PROCEDURE trigger_update_currentlocation(); Grid设置为RowDefinition高度:

Auto

<Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> Auto中的控件提供了恰好需要的空间。

Row的工作方式不同-*首先计算Grid和绝对高度行所需的空间,然后将剩余空间划分为基于“星号”的行。因此,在您的情况下,该应用为列表提供的空间是广告的五倍。但是,当应用程序窗口较小时,该空间可能不足以容纳整个广告。

此外,由于您不再拥有Auto的多行,因此您只需从第一行的声明中删除*

答案 1 :(得分:2)

您有3行,而 AdControl 位于底部的最后一行,因此第三行的高度应为自动,因此只需更改 RowDefinitions ,如下所示:

<Grid.RowDefinitions>
    <RowDefinition Height="5*"/>
    <RowDefinition Height="auto"/>
    <RowDefinition Height="auto"/>
</Grid.RowDefinitions>
  

您可以删除所有视觉状态触发器,因为您不需要自适应布局即可使广告控件正确显示。

横幅广告始终具有固定的尺寸,您可以在应用程序中展示多个广告,但是您选择的任何内容都必须具有固定的尺寸。 :https://docs.microsoft.com/en-us/windows/uwp/monetize/supported-ad-sizes-for-banner-ads

因此,您可以在您的应用中放置2个广告,一个用于窄尺寸,一个用于宽尺寸,然后在视觉状态下切换其可见性,或者另一种选择是使用Native Ads,其中包含您的应用。