none
UWP Incrémenter la taille de la police d'un TextBlock en fonction de la propiété Width d'un élément Grid RRS feed

  • Question

  • Bonjour, sur une page UWP j'ai un élément Grid qui contient un Textblock. La taille de cette Grid peut varier, donc le control Textblock doit s'adapter aussi. J'ai réussi à adapter la propriété Width du Textblock, mais comment faire pour que la taille de la police s'adapte aussi ?

    en clair plus la Grid est large, plus la taille de la police augmente et inversement.

    J'avais pensé un ce code : TextBlock...FontSize={Binding Width,ElementName=GridI} mais cela ne fonctionne pas.

    Voici donc mon code global :

     <RelativePanel Grid.Row="1" Name="Rp1">
                <Grid Name="GridI"
                      Width="1000" Height="600">
                    <TextBlock Name="TBI1" TextWrapping="WrapWholeWords"
                               Width="{Binding Width,ElementName=GridI}"
                               FontSize="28">
                        Avant l’apparition des ordinateurs et l’avènement d’internet et 
                            des smartphones, le plus simple moyen de communiquer entre 2
                            personnes éloignées était l’envoi d’un courrier par la poste.
                            Mais pour que ce dernier arrive à bon port il fallait respecter 
                            quelques règles de base : Ecrire quelque chose pour le destinataire
                            , mettre son adresse sur l’enveloppe et trouver un bureau de poste 
                            pour envoyer cette lettre.
                    </TextBlock>
                </Grid>
            </RelativePanel>


    JF Collombet ® CreateSpecificCulture

    samedi 18 mars 2017 05:56

Réponses

  • Bonjour Jean-François,

    Cet article répond à votre question : https://code.msdn.microsoft.com/windowsapps/How-to-dynamically-set-d2024097

    En revanche, ce que vous devrez faire c'est de trouver le ratio adéquat entre la taille de la police et la largeur de la grid.

    Si cela n'est pas très explicite, faites le moi savoir et je vous enverrais le code.

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW FREE application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    samedi 18 mars 2017 15:46
  • Bonjour,

    Voici le code. J'ai testé et ça fonctionne.

    En revanche, pour pouvoir tester j'ai changé une valeur d'une MinWindowWidth : 

    <Page
        x:Class="App4.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App4"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="WideState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="600" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridPresent.Width"
                                    Value="900" />
                            <Setter Target="TxtBlock.FontSize"
                                    Value="15" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="NarrowState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="1000" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridPresent.Width"
                                    Value="800" />
                            <Setter Target="TxtBlock.FontSize"
                                    Value="30" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <Grid Name="GridPresent">
                <TextBlock Text="Aujourd'hui c'est dimanche" x:Name="TxtBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
    
        </Grid>
    </Page>
    

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW FREE application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    dimanche 19 mars 2017 10:16

Toutes les réponses

  • Bonjour Jean-François,

    Cet article répond à votre question : https://code.msdn.microsoft.com/windowsapps/How-to-dynamically-set-d2024097

    En revanche, ce que vous devrez faire c'est de trouver le ratio adéquat entre la taille de la police et la largeur de la grid.

    Si cela n'est pas très explicite, faites le moi savoir et je vous enverrais le code.

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW FREE application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    samedi 18 mars 2017 15:46
  • Merci c'est exactement ce que je voulais! par contre je veux bien le code pour le ratio .

    merci encore


    JF Collombet ® CreateSpecificCulture

    samedi 18 mars 2017 16:00
  • Je vous en prie, en revanche j'aimerais savoir de quoi dépend la largeur de la grid?

    Est-ce en fonction de la taille de l'écran ou un autre paramètre?


    Download my NEW FREE application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    samedi 18 mars 2017 16:15
  • Elle dépend de la taille de l'écran :

      <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="WideState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="1700"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridPresent.Width" Value="900"/>
    
    
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="NarrowState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="1000"/>
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridPresent.Width" Value="800"/>
    
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>


    JF Collombet ® CreateSpecificCulture

    dimanche 19 mars 2017 03:23
  • Bonjour,

    Voici le code. J'ai testé et ça fonctionne.

    En revanche, pour pouvoir tester j'ai changé une valeur d'une MinWindowWidth : 

    <Page
        x:Class="App4.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App4"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="WideState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="600" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridPresent.Width"
                                    Value="900" />
                            <Setter Target="TxtBlock.FontSize"
                                    Value="15" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="NarrowState">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="1000" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridPresent.Width"
                                    Value="800" />
                            <Setter Target="TxtBlock.FontSize"
                                    Value="30" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <Grid Name="GridPresent">
                <TextBlock Text="Aujourd'hui c'est dimanche" x:Name="TxtBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
    
        </Grid>
    </Page>
    

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW FREE application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    dimanche 19 mars 2017 10:16