How to Grid properly regarding phone screen size

How-to Discussions
1

Hi guys, thank you for an amazing tool like fusetools, i’m struggling to understand how to grid properly , i want to build a card where the image takes 50 % of the Height, and the content takes 50% other space in Height.

this what my code look like

                                    <Rectangle Height="95%" Width="91%" Background="White" CornerRadius="10">
                                      <Grid ColumnCount="1" Rows="4.5,10,3">
                                        <Rectangle Alignment="TopRight" Margin="0,10,10,0" Width="120" Height="30" CornerRadius="3">
                                          <Text TextAlignment="Center" TextColor="White" Alignment="Center">Dépannage</Text>
                                          <LinearGradient StartPoint="0,0" EndPoint="1,0.75">
                                            <GradientStop Offset="0" Color="#FC3C47" />
                                            <GradientStop Offset="1" Color="#B73070" />
                                          </LinearGradient>
                                        </Rectangle>
                                        <Image Row="0" RowSpan="2" File="Assets/gigantic-moving-palo-alto.jpg" StretchMode="UniformToFill" Alignment="TopLeft" />
                                        <StackPanel Margin="0,2,0,0">
                                          <DockPanel>
                                            <Text Value="ahahahaha" Font="Lato" Dock="Left" TextColor="Gray" Margin="8,0,0,0"/>
                                          </DockPanel>
                                          <Text MaxLength="160" Margin="0,4,0,0" TextWrapping="Wrap" Padding="6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
                                        </StackPanel>
                                        <DockPanel Margin="0,4,0,0" Dock="Bottom" Padding="4">
                                          <Circle Height="30" Width="30" Dock="Left" Margin="6,0,0,0">
                                            <ImageFill File="assets/Michael-jordan.jpg" StretchMode="UniformToFill"/>
                                          </Circle>
                                          <Text Font="Lato" TextColor="Gray"  Margin="6,2,0,0">2500 - 400 €</Text>
                                          <Text Margin="5,18,0,0" Font="Lato" FontSize="13" TextColor="Gray">Carlou Bouta</Text>
                                          <DockPanel Dock="Right">
                                            <Icon File="assets/placeholder.png"  Dock="Left" Margin="0,0,4,0"/>
                                            <Text Value="15km" TextColor="#FC3C47" Font="Lato" Margin="0,10,6,0"/>
                                          </DockPanel>
                                        </DockPanel>
                                      </Grid>
                                    </Rectangle>

file
KD0rhmmy1mBy-legacy-files-iXs8LWCBm0dlOKOO-JHkw6HwkTht1_xL4JA5iGcmJ.png440×610

this is the result , fine in large phone but with small phone 4" for example , the card is broken , the text exceeds etc.

my question is , how can i build a card who will adapt in all size screen without getting broke

2

Hi!

Sounds like the core problem is that the Text is too big for the alotted space on smaller screens.

There is no easy/nice solution to this if you actually need to display all the text, but work-arounds you can evaluate is:

  • Turn on ClipToBounds="true" on the text
  • Turn on TextTruncation="Standard"
  • Place the Text inside a Viewbox to scale it to fit. Will fit all the text but will look unsharp/weird
3

Hi, What i was wondering to do , is to display a few text who don’t exceed 160 in length with 3 points at the ends of the text, didnt find how to do it nicely , Viewbox give something weird, truncation and clipTobound doesnt give what i need

4

Hi,

I think you need to do that in JavaScript then, on your data:

if (s.length > 160) s = s.substring(0, 160) + "...";