CODEWITHSUNDEEP
xamlwindows-phonewinrt-xamlwin-universal-appwindows-10
robertk
robertk

Reputation: 2461

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>

Upvotes: 0

Views: 5480

Answers (2)

harinikannan
harinikannan

Reputation: 146

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.

Upvotes: 13

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21919

To let a FrameworkElement stretch to fill its container set its HorizontalAlignment to Stretch. It's difficult to see this with the TextBlock though since it doesn't have a background and the text within the TextBlock doesn't stretch. You can add a HorizontalAlignment on a surrounding ViewBox if you want to stretch the Text.

<ViewBox HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Uniform">
    <TextBlock Text="Lorem ipsum dolor sit Amet" />
</ViewBox>

The other thing to check is that the container your TextBlock is in fills the window. Most will by default if you don't override it.

Upvotes: 0

Related Questions