Search code examples
xamlwindows-phonewinrt-xamlwin-universal-appwindows-10

Fit element width of current screensize in an universal app


I'm trying to develop an app for Windows 10. But with the all new screensizing I can't seem to figure out how to get an element to fit to the current size of a device screen.

For example I want a TextBlock to fit the width of the window if you resize it. I've tried the ViewBox, VariableSIzedWrapGrid etc etc but nothing seems to fix my problem. Anyone knows? enter image description here

Update: It's the searchbox I'm trying to fit to the size of the window below. The grid fills the whole window and so does the RelativePanel if I put a background color on it. But the SearchBox refuses to strech... I don't want the searchbox to to scale in size, just it's width to fit the window/device width.

        <!-- SEARCH GRID -->
    <Grid Canvas.ZIndex="5" x:Name="GridSearchPackage" HorizontalAlignment="Stretch" Visibility="Visible" Opacity="0.85" Background="White">
        <RelativePanel HorizontalAlignment="Stretch" Margin="5,5,0,0" >
            <Button x:Name="ButtonBackSearchGrid" Height="36" Width="36" FontSize="10" Margin="0,7,5,0"
                  Style="{StaticResource BackButtonStyle}"
                  Click="ButtonBackSearchGrid_Click"
                  AutomationProperties.Name="Back"
                  AutomationProperties.AutomationId="BackButton"
                  AutomationProperties.ItemType="Navigation Button" BorderBrush="Black" BorderThickness="3">
                <FontIcon x:Name="backButtonIcon" FontWeight="Bold" FontSize="20" Foreground="{StaticResource AppDarkBlueColor}" Glyph="&#xE72B;" />
            </Button>
            <TextBlock x:Name="TextBlockPopupSearchTitle" RelativePanel.RightOf="ButtonBackSearchGrid" Foreground="{StaticResource AppDefaultBlueColor}" Text="Search XZY" FontSize="34"/>
            <SearchBox FontSize="20" RelativePanel.Below="TextBlockPopupSearchTitle" HorizontalAlignment="Stretch" PlaceholderText="search" Margin="0,10,0,0" QuerySubmitted="SearchBox_QuerySubmitted" QueryText="{Binding SearchText, Mode=TwoWay}"/>
        </RelativePanel>
    </Grid>

Solution

  • When you are using RelativePanel, you might want to set AlignLeftWithPanel and AlignRightWithPanel = true to make the entire horizontal space available for the TextBlock (and similarly AlignTopWithPanel, AlignBottomWithPanel=true for vertical). Most UIElements have HorizontalAlignment/VerticalAlignment = Stretch as the default, but you might want to set that explicitly as well to ensure the actual visual of the TextBlock is stretched across the screen.

    When the window is resized, the element will automatically resize using the above settings. You don't need to use a ViewBox here to achieve this.