Vue d'ensemble des fonctionnalités bidirectionnelles dans WPFBidirectional Features in WPF Overview

Contrairement à d’autres plateformes de développement, WPFWPF possède de nombreuses fonctionnalités qui prennent en charge le développement rapide de contenu bidirectionnel, par exemple, mixte de gauche à droite et de droite à gauche des données dans le même document.Unlike any other development platform, WPFWPF has many features that support rapid development of bidirectional content, for example, mixed left to right and right to left data in the same document. En même temps, WPFWPF crée une excellente expérience pour les utilisateurs qui ont besoin de fonctionnalités bidirectionnelles tels que les utilisateurs de langue arabe et hébreu.At the same time, WPFWPF creates an excellent experience for users who require bidirectional features such as Arabic and Hebrew speaking users.

Les sections suivantes expliquent de nombreuses fonctionnalités bidirectionnelles, accompagnées d’exemples qui illustrent comment réaliser le meilleur affichage de contenu bidirectionnel.The following sections explain many bidirectional features together with examples illustrating how to achieve the best display of bidirectional content. La plupart des exemples utilisent XAMLXAML, bien que vous pouvez facilement appliquer ces concepts à C# ou du code Microsoft Visual Basic.Most of the samples use XAMLXAML, though you can easily apply the concepts to C# or Microsoft Visual Basic code.

FlowDirectionFlowDirection

La propriété de base qui définit le sens de déroulement du contenu dans un WPFWPF application est FlowDirection.The basic property that defines the content flow direction in a WPFWPF application is FlowDirection. Cette propriété peut être définie à une des deux valeurs d’énumération, LeftToRight ou RightToLeft.This property can be set to one of two enumeration values, LeftToRight or RightToLeft. La propriété est disponible pour tous les WPFWPF éléments qui héritent FrameworkElement.The property is available to all WPFWPF elements that inherit from FrameworkElement.

Les exemples suivants définissent le sens du déroulement un TextBox élément.The following examples set the flow direction of a TextBox element.

Sens de déroulement de gauche à droiteLeft-to-right flow direction

<TextBlock Background="DarkBlue" Foreground="LightBlue" 
   FontSize="20" FlowDirection="LeftToRight">
        This is a left-to-right TextBlock
</TextBlock>

Sens de déroulement de droite à gaucheRight-to-left flow direction

<TextBlock Background="LightBlue" Foreground="DarkBlue"
   FontSize="20" FlowDirection="RightToLeft">
        This is a right-to-left TextBlock
</TextBlock>

Le graphique suivant montre le rendu généré par le code précédent.The following graphic shows how the previous code renders.

Graphique illustrant les sens de déroulement différents.

Un élément dans un interface utilisateur (UI)user interface (UI) arborescence hériteront le FlowDirection à partir de son conteneur.An element within a interface utilisateur (UI)user interface (UI) tree will inherit the FlowDirection from its container. Dans l’exemple suivant, le TextBlock se trouve dans un Grid, qui réside dans un Window.In the following example, the TextBlock is inside a Grid, which resides in a Window. Définition de la FlowDirection pour le Window implique de le définir pour le Grid et TextBlock également.Setting the FlowDirection for the Window implies setting it for the Grid and TextBlock as well.

L’exemple suivant montre comment définir FlowDirection.The following example demonstrates setting FlowDirection.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="FlowDirectionApp.Window1"
    Title="BidiFeatures" Height="200" Width="700" 
    FlowDirection="RightToLeft">
     
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" >
          This is a right-to-left TextBlock
      </TextBlock>

      <TextBlock Grid.Column="1" FlowDirection="LeftToRight">
          This is a left-to-right TextBlock
      </TextBlock>
    </Grid>
</Window>

Le niveau supérieur Window a un RightToLeft FlowDirection, de sorte que tous les éléments contenus dans celui-ci héritent également de la même FlowDirection.The top level Window has a RightToLeftFlowDirection, so all elements contained within it also inherit the same FlowDirection. Pour un élément à remplacer spécifié FlowDirection il doit ajouter une modification de sens explicite, comme le deuxième TextBlock dans l’exemple précédent qui le modifie en LeftToRight.For an element to override a specified FlowDirection it must add an explicit direction change such as the second TextBlock in the previous example which changes to LeftToRight. En cas de non FlowDirection est défini, la valeur par défaut LeftToRight s’applique.When no FlowDirection is defined, the default LeftToRight applies.

Le graphique suivant illustre la sortie de l’exemple précédent :The following graphic shows the output of the previous example:

Graphique illustrant la modification de la direction du flux explicite.

FlowDocumentFlowDocument

Comme de nombreuses plateformes de développement HTMLHTML, Win32Win32 et Java fournissent la prise en charge spéciale pour le développement de contenu bidirectionnel.Many development platforms such as HTMLHTML, Win32Win32 and Java provide special support for bidirectional content development. Langages de balisage comme HTMLHTML aux rédacteurs de contenu le balisage nécessaire pour afficher du texte dans n’importe quel sens requis, par exemple le HTMLHTML 4.0 balise, « dir », qui prend les valeurs « rtl » ou « ltr ».Markup languages such as HTMLHTML give content writers the necessary markup to display text in any required direction, for example the HTMLHTML 4.0 tag, "dir" that takes "rtl" or "ltr" as values. Cette balise est similaire à la FlowDirection propriété, mais la FlowDirection propriété fonctionne de manière plus avancée à la disposition de contenu textuel et peut être utilisée pour le contenu autre que du texte.This tag is similar to the FlowDirection property, but the FlowDirection property works in a more advanced way to layout textual content and can be used for content other than text.

Dans WPFWPF, un FlowDocument est un polyvalent Interface utilisateurUI élément qui peut héberger une combinaison de texte, des tables, des images et autres éléments.In WPFWPF, a FlowDocument is a versatile Interface utilisateurUI element that can host a combination of text, tables, images and other elements. Les exemples des sections suivantes utilisent cet élément.The samples in the following sections use this element.

Ajout de texte à un FlowDocument est possible de plusieurs façons.Adding text to a FlowDocument can be done in more that one way. Un moyen simple de le faire consiste à utiliser un Paragraph qui est un élément de niveau bloc utilisé pour regrouper le contenu telles que du texte.A simple way to do so is through a Paragraph which is a block-level element used to group content such as text. Pour ajouter du texte aux éléments inclus, les exemples utilisent Span et Run.To add text to inline-level elements the samples use Span and Run. Span est un élément de contenu de flux inline utilisé pour grouper d’autres éléments inclus, tandis qu’un Run est un flux inline contenu élément destiné à contenir une séquence de texte non formaté.Span is an inline-level flow content element used for grouping other inline elements, while a Run is an inline-level flow content element intended to contain a run of unformatted text. Un Span peut contenir plusieurs Run éléments.A Span can contain multiple Run elements.

Le premier exemple de document contient un document qui possède un numéro de réseau de partager des noms ; par exemple \\server1\folder\file.ext.The first document example contains a document that has a number of network share names; for example \\server1\folder\file.ext. Que ce lien réseau soit dans un document en arabe ou en anglais, vous souhaiterez toujours qu’il apparaisse de la même façon.Whether you have this network link in an Arabic or English document, you always want it to appear in the same way. Le graphique suivant illustre l’utilisation de l’élément Span et montre le lien dans un arabe RightToLeft document :The following graphic illustrates using the Span element and shows the link in an Arabic RightToLeft document:

Graphique illustrant l’utilisation de l’élément Span. Graphic that illustrates using the Span element.

Étant donné que le texte est RightToLeftspéciale tous les caractères, tels que le «\», séparer le texte dans un droit d’ordre de gauche.Because the text is RightToLeft, all special characters, such as the "\", separate the text in a right to left order. Qui résulte dans le lien n’est pas affiché dans l’ordre approprié, par conséquent, pour résoudre le problème, le texte doit être incorporé pour conserver un distinct Run circulant LeftToRight.That results in the link not being shown in the correct order, therefore to solve the problem, the text must be embedded to preserve a separate Run flowing LeftToRight. Au lieu d’avoir un distinct Run pour chaque langue, une meilleure façon de résoudre le problème consiste à incorporer le texte anglais moins fréquemment utilisé dans un plus grand arabe Span.Instead of having a separate Run for each language, a better way to solve the problem is to embed the less frequently used English text into a larger Arabic Span.

Le graphique suivant illustre cela à l’aide de l’élément Run incorporé dans un élément Span :The following graphic illustrates this by using the Run element embedded in a Span element:

Graphique qui illustre l’élément Run incorporé dans un élément Span.

L’exemple suivant montre comment utiliser Run et Span éléments dans des documents.The following example demonstrates using Run and Span elements in documents.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FlowDirection="RightToLeft">

  <FlowDocument>
    <Paragraph>
      <Span FlowDirection="RightToLeft" >
        ستجد الملف هنا:
        <Run FlowDirection="LeftToRight">
           \\server1\filename\filename1.txt</Run>
        ثم باقى النص!
      </Span>
    </Paragraph>
  </FlowDocument>
</Page>

Éléments SpanSpan Elements

Le Span élément fonctionne comme une limite qui sépare les textes qui ont des sens de déroulement différents.The Span element works as a boundary separator between texts with different flow directions. Même Span éléments avec la même direction de flux sont considérés comme ayant des portées bidirectionnelles différentes ce qui signifie que le Span éléments sont classés dans le conteneur FlowDirection, uniquement le contenu dans le Span élément suit le FlowDirection de la Span.Even Span elements with the same flow direction are considered to have different bidirectional scopes which means that the Span elements are ordered in the container’s FlowDirection, only the content within the Span element follows the FlowDirection of the Span.

Le graphique suivant montre le sens de déroulement de plusieurs TextBlock éléments.The following graphic shows the flow direction of several TextBlock elements.

Graphique illustrant les blocs de texte avec directions de flux différentes.

L’exemple suivant montre comment utiliser le Span et Run éléments à produire les résultats affichés dans le graphique précédent.The following example shows how to use the Span and Run elements to produce the results shown in the previous graphic.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <StackPanel >

    <TextBlock FontSize="20" FlowDirection="RightToLeft">
      <Run FlowDirection="LeftToRight">العالم</Run>
      <Run FlowDirection="LeftToRight" Foreground="Red" >فى سلام</Run>
    </TextBlock>

    <TextBlock FontSize="20" FlowDirection="LeftToRight">
      <Run FlowDirection="RightToLeft">العالم</Run>
      <Run FlowDirection="RightToLeft" Foreground="Red" >فى سلام</Run>
    </TextBlock>

    <TextBlock FontSize="20" Foreground="Blue">العالم فى سلام</TextBlock>

    <Separator/>

    <TextBlock FontSize="20" FlowDirection="RightToLeft">
      <Span Foreground="Red" FlowDirection="LeftToRight">Hello</Span>
      <Span FlowDirection="LeftToRight">World</Span>
    </TextBlock>

    <TextBlock FontSize="20" FlowDirection="LeftToRight">
      <Span Foreground="Red" FlowDirection="RightToLeft">Hello</Span>
      <Span FlowDirection="RightToLeft">World</Span>
    </TextBlock>

    <TextBlock FontSize="20" Foreground="Blue">Hello World</TextBlock>

  </StackPanel>

</Page>

Dans le TextBlock éléments dans l’exemple, le Span éléments sont disposés selon le FlowDirection de leurs parents, mais le texte au sein de chaque Span élément se déroule dans son propre FlowDirection.In the TextBlock elements in the sample, the Span elements are laid out according to the FlowDirection of their parents, but the text within each Span element flows according to its own FlowDirection. Ceci s’applique au latin et à l’arabe ou à toute autre langue.This is applicable to Latin and Arabic – or any other language.

Ajout de xml:langAdding xml:lang

Le graphique suivant illustre un autre exemple qui utilise des nombres et des expressions arithmétiques, telles que "200.0+21.4=221.4".The following graphic shows another example that uses numbers and arithmetic expressions, such as "200.0+21.4=221.4". Notez que seul le FlowDirection est définie.Notice that only the FlowDirection is set.

Graphique affichant des nombres en utilisant uniquement FlowDirection.

Les utilisateurs de cette application seront déçus par la sortie, même si le FlowDirection est correct, les nombres ne sont pas formés comme des nombres arabes devraient être.Users of this application will be disappointed by the output, even though the FlowDirection is correct the numbers are not shaped as Arabic numbers should be shaped.

Les éléments XAML peuvent inclure un XMLXML attribut (xml:lang) qui définit la langue de chaque élément.XAML elements can include an XMLXML attribute (xml:lang) that defines the language of each element. XAML prend également en charge un XMLXML principe de langue dans laquelle xml:lang valeurs appliquées aux éléments parents dans l’arborescence sont utilisées par les éléments enfants.XAML also supports a XMLXML language principle whereby xml:lang values applied to parent elements in the tree are used by child elements. Dans l’exemple précédent, car un langage n’a pas été défini pour le Run élément ou l’un de ses haut niveau des éléments, la valeur par défaut xml:lang a été utilisé, ce qui est en-US pour XAML.In the previous example, because a language was not defined for the Run element or any of its top level elements, the default xml:lang was used, which is en-US for XAML. L’algorithme de mise en forme de nombres interne de Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) sélectionne les nombres dans la langue correspondante, dans ce cas l’anglais.The internal number shaping algorithm of Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) selects numbers in the corresponding language – in this case English. Pour rendre l’arabe correcte des numéros de rendu xml:lang doit être définie.To make the Arabic numbers render correctly xml:lang needs to be set.

Le graphique suivant montre l’exemple avec xml:lang ajouté.The following graphic shows the example with xml:lang added.

Graphique illustrant les chiffres arabes se déroulant de droite à gauche.

L’exemple suivant ajoute xml:lang à l’application.The following example adds xml:lang to the application.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FlowDirection="RightToLeft">
      <FlowDocument>
         <Paragraph>
            <Span FlowDirection="RightToLeft" Language="ar-SA">
              العملية الحسابية: "200.0+21.4=221.4"
            </Span>
         </Paragraph>
      </FlowDocument>
</Page>

N’oubliez pas que de nombreuses langues ont différentes xml:lang valeurs selon la région ciblée, par exemple, "ar-SA" et "ar-EG" représentent deux variantes de l’arabe.Be aware that many languages have different xml:lang values depending on the targeted region, for example, "ar-SA" and "ar-EG" represent two variations of Arabic. Les exemples précédents montrent que vous devez définir à la fois le xml:lang et FlowDirection valeurs.The previous examples illustrate that you need to define both the xml:lang and FlowDirection values.

FlowDirection avec des éléments autres que textuelsFlowDirection with Non-text Elements

FlowDirection définit non seulement comment le texte s’écrit dans un élément textuel, mais également le sens de déroulement de presque tous les autres Interface utilisateurUI élément.FlowDirection defines not only how text flows in a textual element but also the flow direction of almost every other Interface utilisateurUI element. L’illustration suivante montre un ToolBar qui utilise un horizontal LinearGradientBrush pour dessiner son arrière-plan avec de gauche à droite dégradé.The following graphic shows a ToolBar that uses a horizontal LinearGradientBrush to draw its background with a left to right gradient.

Graphique montrant une barre d’outils avec un dégradé de droite à gauche.

Après avoir défini le FlowDirection à RightToLeft, non seulement la ToolBar boutons sont organisés de droite à gauche, mais même si le LinearGradientBrush réaligner ses offsets pour les flux de droite à gauche.After setting the FlowDirection to RightToLeft, not only the ToolBar buttons are arranged from right to left, but even the LinearGradientBrush realigns its offsets to flow from right to left.

Le graphique suivant illustre le réalignement de le LinearGradientBrush.The following graphic shows the realignment of the LinearGradientBrush.

Graphique montrant une barre d’outils avec le bouton droit pour le dégradé de gauche.

L’exemple suivant dessine une RightToLeft ToolBar.The following example draws a RightToLeftToolBar. (Pour le dessiner de gauche à droite, supprimez le FlowDirection d’attribut sur le ToolBar.(To draw it left to right, remove the FlowDirection attribute on the ToolBar.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <ToolBar FlowDirection="RightToLeft" Height="50" DockPanel.Dock="Top">
    <ToolBar.Background>
      <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Color="DarkRed" Offset="0" />
          <GradientStop Color="DarkBlue" Offset="0.3" />
          <GradientStop Color="LightBlue" Offset="0.6" />
          <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </ToolBar.Background>

    <Button FontSize="12" Foreground="White">Button1</Button>
    <Rectangle Width="20"/>
    <Button FontSize="12" Foreground="White">Button2</Button>
    <Rectangle Width="20"/>
    <Button FontSize="12" Foreground="White">Button3</Button>
    <Rectangle Width="20"/>
    <Button FontSize="12" Foreground="White">Button4</Button>
    <Rectangle Width="20"/>
  </ToolBar>
</Page>

Exceptions de FlowDirectionFlowDirection Exceptions

Il existe quelques cas où FlowDirection ne se comporte pas comme prévu.There are a few cases where FlowDirection does not behave as expected. Cette section décrit deux de ces exceptions.This section covers two of these exceptions.

ImageImage

Un Image représente un contrôle qui affiche une image.An Image represents a control that displays an image. Dans XAMLXAML il peut être utilisé avec un Source propriété qui définit le URI (Uniform Resource Identifier)uniform resource identifier (URI) de la Image à afficher.In XAMLXAML it can be used with a Source property that defines the URI (Uniform Resource Identifier)uniform resource identifier (URI) of the Image to display.

Contrairement à d’autres Interface utilisateurUI éléments, un Image n’hérite pas les FlowDirection à partir du conteneur.Unlike other Interface utilisateurUI elements, an Image does not inherit the FlowDirection from the container. Toutefois, si le FlowDirection a pour valeur explicitement RightToLeft, un Image s’affiche retournée horizontalement.However, if the FlowDirection is set explicitly to RightToLeft, an Image is displayed flipped horizontally. Cette implémentation est une fonctionnalité pratique pour les développeurs de contenu bidirectionnel, car dans certains cas, le fait de retourner l’image horizontalement produit l’effet recherché.This is implemented as a convenient feature for developers of bidirectional content; because in some cases, horizontally flipping the image produces the desired effect.

Le graphique suivant illustre un retournement Image.The following graphic shows a flipped Image.

Graphique illustrant une image retournée.

L’exemple suivant montre que le Image ne parvient pas à hériter la FlowDirection à partir de la StackPanel qui le contient.The following example demonstrates that the Image fails to inherit the FlowDirection from the StackPanel that contains it. Remarque vous devez disposer d’un fichier nommé ms_logo.jpg sur votre C:\ lecteur pour exécuter cet exemple.Note You must have a file named ms_logo.jpg on your C:\ drive to run this example.

<StackPanel 
  xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
  FlowDirection="RightToLeft">

  <Image Source="file://c:/ms_logo.jpg" 
         Width="147" Height="50"/>
  <Separator Height="10"/>
  <Image Source="file://c:/ms_logo.jpg" 
         Width="147" Height="50" FlowDirection="LeftToRight" />
  <Separator Height="10"/>
  <Image Source="file://c:/ms_logo.jpg" 
         Width="147" Height="50" FlowDirection="RightToLeft"/>
</StackPanel>

Remarque est inclus dans les fichiers à télécharger un ms_logo.jpg fichier.Note Included in the download files is an ms_logo.jpg file. Le code suppose que le fichier .jpg n’est pas à l’intérieur de votre projet mais quelque part sur le lecteur C:.The code assumes that the .jpg file is not inside your project but somewhere on the C:\ drive. Vous devez copier le fichier .jpg depuis les fichiers de projet vers votre lecteur C:\ ou modifier le code pour qu’il recherche le fichier à l’intérieur du projet.You must copy the .jpg from the project files to your C:\ drive or change the code to look for the file inside the project. Pour ce faire, modifiez Source="file://c:/ms_logo.jpg" à Source="ms_logo.jpg".To do this change Source="file://c:/ms_logo.jpg" to Source="ms_logo.jpg".

TracésPaths

Outre un Image, un autre élément intéressant est Path.In addition to an Image, another interesting element is Path. Un tracé est un objet qui peut dessiner une série de lignes et de courbes reliées.A Path is an object that can draw a series of connected lines and curves. Il se comporte de manière similaire à un Image concernant son FlowDirection; par exemple son RightToLeft FlowDirection est un miroir horizontal de son LeftToRight une.It behaves in a manner similar to an Image regarding its FlowDirection; for example its RightToLeftFlowDirection is a horizontal mirror of its LeftToRight one. Cependant, contrairement à un Image, Path hérite son FlowDirection à partir du conteneur et il est inutile de spécifier explicitement.However, unlike an Image, Path inherits its FlowDirection from the container and one does not need to specify it explicitly.

L’exemple suivant dessine une flèche simple à l’aide de 3 lignes.The following example draws a simple arrow using 3 lines. La première flèche hérite le RightToLeft direction de flux le StackPanel afin que ses points d’entrée et sont mesurées à partir d’une racine sur le côté droit.The first arrow inherits the RightToLeft flow direction from the StackPanel so that its start and end points are measured from a root on the right side. La deuxième flèche qui a explicite RightToLeft FlowDirection démarre également sur le côté droit.The second arrow which has an explicit RightToLeftFlowDirection also starts on the right side. Cependant, la troisième flèche a sa racine de début située sur le côté gauche.However, the third arrow has its starting root on the left side. Pour plus d’informations sur le dessin, consultez LineGeometry et GeometryGroup.For more information on drawing see LineGeometry and GeometryGroup.

<StackPanel 
  xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' 
  FlowDirection="RightToLeft">

  <Path Stroke="Blue" StrokeThickness="4">
    <Path.Data>
      <GeometryGroup >
        <LineGeometry StartPoint="300,10" EndPoint="350,30" />
        <LineGeometry StartPoint="10,30" EndPoint="352,30" />
        <LineGeometry StartPoint="300,50" EndPoint="350,30" />
      </GeometryGroup>
    </Path.Data>
  </Path>

  <Path Stroke="Red" StrokeThickness="4" FlowDirection="RightToLeft">
    <Path.Data>
      <GeometryGroup >
        <LineGeometry StartPoint="300,10" EndPoint="350,30" />
        <LineGeometry StartPoint="10,30" EndPoint="352,30" />
        <LineGeometry StartPoint="300,50" EndPoint="350,30" />
      </GeometryGroup>
    </Path.Data>
  </Path>
 
  <Path Stroke="Green" StrokeThickness="4" FlowDirection="LeftToRight">
    <Path.Data>
      <GeometryGroup >
        <LineGeometry StartPoint="300,10" EndPoint="350,30" />
        <LineGeometry StartPoint="10,30" EndPoint="352,30" />
        <LineGeometry StartPoint="300,50" EndPoint="350,30" />
      </GeometryGroup>
    </Path.Data>
  </Path>
</StackPanel>

Le graphique suivant illustre la sortie de l’exemple précédent qui comporte des flèches dessinées à l’aide de la Path élément :The following graphic shows the output of the previous example with arrows drawn using the Path element:

Graphique illustrant des flèches dessinées à l’aide de l’élément de chemin d’accès.

Le Image et Path sont deux exemples de la façon dont Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) utilise FlowDirection.The Image and Path are two examples of a how Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) uses FlowDirection. En regard de la mise en page Interface utilisateurUI éléments dans un sens spécifique au sein d’un conteneur, FlowDirection peut être utilisé avec des éléments tels que InkPresenter qui restitue l’encre sur une surface, LinearGradientBrush, RadialGradientBrush.Beside laying out Interface utilisateurUI elements in a specific direction within a container, FlowDirection can be used with elements such as InkPresenter which renders ink on a surface, LinearGradientBrush, RadialGradientBrush. Chaque fois que vous avez besoin d’un comportement de droite à gauche de votre contenu qui reproduit un comportement de gauche à droite, ou vice versa, Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) fournit cette fonctionnalité.Whenever you need a right to left behavior for your content that mimics a left to right behavior, or vice versa, Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides that capability.

Substitution de nombresNumber Substitution

Historiquement, WindowsWindows a pris en charge la substitution de nombres en permettant la représentation sous forme de différentes formes de culturels pour les chiffres de mêmes, tout en conservant le stockage interne de ces chiffres unifié entre les différents paramètres régionaux, des exemples de numéros sont stockées dans leurs valeurs connues hexadécimales, 0 x 40, 0 x 41, mais affichés en fonction de la langue sélectionnée.Historically, WindowsWindows has supported number substitution by allowing the representation of different cultural shapes for the same digits while keeping the internal storage of these digits unified among different locales, for example numbers are stored in their well known hexadecimal values, 0x40, 0x41, but displayed according to the selected language.

Ceci a permis aux applications de traiter des valeurs numériques sans avoir à les convertir d’une langue à l’autre, par exemple un utilisateur peut ouvrir une Microsoft ExcelMicrosoft Excel feuille de calcul dans une version localisée en arabe WindowsWindows et voir les numéros de forme arabe, mais l’ouvrir dans une version européenne de WindowsWindows et voir les mêmes numéros de représentation européenne.This has allowed applications to process numerical values without the need to convert them from one language to another, for example a user can open an Microsoft ExcelMicrosoft Excel spreadsheet in a localized Arabic WindowsWindows and see the numbers shaped in Arabic, but open it in a European version of WindowsWindows and see European representation of the same numbers. Ceci est également nécessaire pour les autres symboles tels que les virgules et le symbole du pourcentage, car ils accompagnent habituellement des nombres dans le même document.This is also necessary for other symbols such as comma separators and percentage symbol because they usually accompany numbers in the same document.

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) continue dans la même tradition et ajoute une prise en charge supplémentaire de cette fonctionnalité qui permet un meilleur contrôle de l’utilisateur sur quand et comment la substitution est utilisée.continues the same tradition, and adds further support for this feature that allows more user control over when and how substitution is used. Bien que cette fonctionnalité soit conçue pour n’importe quelle langue, elle est particulièrement utile pour du contenu bidirectionnel, où la mise en forme des chiffres pour une langue spécifique est habituellement un défi pour les développeurs d’application du fait des différentes cultures dans lesquelles peut s’exécuter l’application.While this feature is designed for any language, it is particularly useful in bidirectional content where shaping digits for a specific language is usually a challenge for application developers because of the various cultures an application might run on.

La principale propriété qui contrôle la substitution de nombres comment fonctionne Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) est le Substitution propriété de dépendance.The core property controlling how number substitution works in Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) is the Substitution dependency property. Le NumberSubstitution classe spécifie comment les nombres d’un texte doivent être affichées.The NumberSubstitution class specifies how numbers in text are to be displayed. Elle a trois propriétés publiques qui définissent son comportement.It has three public properties that define its behavior. Voici un résumé de chacune des propriétés.Following is a summary of each of the properties.

CultureSource :CultureSource:

Cette propriété spécifie la manière dont est déterminée la culture pour les nombres.This property specifies how the culture for numbers is determined. Elle prend une des trois NumberCultureSource valeurs d’énumération.It takes one of three NumberCultureSource enumeration values.

CultureOverride :CultureOverride:

Le CultureOverride propriété est utilisée uniquement si le CultureSource propriété est définie sur Override et est ignorée dans le cas contraire.The CultureOverride property is used only if the CultureSource property is set to Override and is ignored otherwise. Elle spécifie la culture pour les nombres.It specifies the number culture. La valeur null, la valeur par défaut, est interprétée comme en-US.A value of null, the default value, is interpreted as en-US.

Substitution :Substitution:

Cette propriété spécifie le type de substitution de nombres à effectuer.This property specifies the type of number substitution to perform. Elle prend l’une des opérations suivantes NumberSubstitutionMethod valeurs d’énumération :It takes one of the following NumberSubstitutionMethod enumeration values:

  • AsCulture: La méthode de substitution est déterminée en fonction de la culture des nombres NumberFormatInfo.DigitSubstitution propriété.AsCulture: The substitution method is determined based on the number culture's NumberFormatInfo.DigitSubstitution property. Il s'agit de la valeur par défaut.This is the default.

  • Context: Si la culture des nombres est une culture arabe ou perse, il spécifie que les chiffres dépendent du contexte.Context: If the number culture is an Arabic or Persian culture, it specifies that the digits depend on the context.

  • European: Nombres sont toujours restitués comme des chiffres européens.European: Numbers are always rendered as European digits.

  • NativeNational: Nombres sont restitués à l’aide des chiffres nationaux pour la culture des nombres, comme spécifié par la culture NumberFormat.NativeNational: Numbers are rendered using the national digits for the number culture, as specified by the culture's NumberFormat.

  • Traditional: Nombres sont restitués avec les chiffres traditionnels pour la culture des nombres.Traditional: Numbers are rendered using the traditional digits for the number culture. Pour la plupart des cultures, cela est identique à NativeNational.For most cultures, this is the same as NativeNational. Toutefois, NativeNational produit des chiffres latins pour certaines cultures arabes, tandis que cette valeur produit des chiffres arabes pour toutes les cultures arabes.However, NativeNational results in Latin digits for some Arabic cultures, whereas this value results in Arabic digits for all Arabic cultures.

Que signifient ces valeurs pour un développeur de contenu bidirectionnel ?What do those values mean for a bidirectional content developer? Dans la plupart des cas, le développeur peut devez uniquement définir FlowDirection et la langue de chaque textuelle Interface utilisateurUI élément, par exemple Language="ar-SA" et NumberSubstitution logique se charge d’afficher les nombres en fonction de la bonne Interface utilisateurUI.In most cases, the developer might need only to define FlowDirection and the language of each textual Interface utilisateurUI element, for example Language="ar-SA" and the NumberSubstitution logic takes care of displaying the numbers according to the correct Interface utilisateurUI. L’exemple suivant illustre l’utilisation des nombres arabes et anglais dans une Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) application en cours d’exécution sur une version arabe de WindowsWindows.The following example demonstrates using Arabic and English numbers in a Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) application running in an Arabic version of WindowsWindows.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel>
   <TextBlock Background="LightGreen" FontSize="32" 
      Language="ar-SA" FlowDirection="RightToLeft">1+2=3</TextBlock>
   <TextBox Background="LightGreen" FontSize="32" 
      Language="ar-SA" FlowDirection="RightToLeft">1+2=3</TextBox>
   <TextBlock Background="LightBlue" FontSize="32">1+2=3</TextBlock>
   <TextBox Background="LightBlue" FontSize="32">1+2=3</TextBox>
 </StackPanel>
</Page>

Le graphique suivant montre la sortie de l’exemple précédent, si vous exécutez une version arabe de Windows avec des nombres arabes et anglais affichées :The following graphic shows the output of the previous sample if you're running in an Arabic version of Windows with Arabic and English numbers displayed:

Graphique montrant des nombres arabes et anglais.

Le FlowDirection était important dans ce cas, car l’affectation du FlowDirection à LeftToRight à la place aurait produit des chiffres européens.The FlowDirection was important in this case because setting the FlowDirection to LeftToRight instead would have yielded European digits. Les sections suivantes expliquent comment obtenir un affichage unifié des chiffres dans l’ensemble de votre document.The following sections discuss how to have a unified display of digits throughout your document. Si cet exemple ne s’exécute pas sur une version arabe de Windows, tous les chiffres sont affichés en tant que chiffres européens.If this example is not running on Arabic Windows, all the digits display as European digits.

Définition des règles de substitutionDefining Substitution Rules

Dans une application réelle, il est possible que vous ayez besoin de définir la langue par programmation.In a real application you might need to set the Language programmatically. Par exemple, vous souhaitez définir le xml:lang attribut est le même que celui utilisé par le système Interface utilisateurUI, ou peut-être modifier la langue en fonction de l’état de l’application.For example, you want to set the xml:lang attribute to be the same as the one used by the system’s Interface utilisateurUI, or maybe change the language depending on the application state.

Si vous souhaitez apporter en fonction de modifications sur l’état de l’application, utilisez d’autres fonctionnalités fournies par Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF).If you want to make changes based on the application's state, make use of other features provided by Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF).

Tout d’abord, définissez le composant d’application NumberSubstitution.CultureSource="Text".First, set the application component’s NumberSubstitution.CultureSource="Text". À l’aide de ce paramètre permet de s’assurer que les paramètres ne proviennent pas du Interface utilisateurUI pour les éléments de texte qui ont « User » en tant que la valeur par défaut, tel que TextBlock.Using this setting makes sure that the settings do not come from the Interface utilisateurUI for text elements that have "User" as the default, such as TextBlock.

Exemple :For example:

<TextBlock
   Name="text1" NumberSubstitution.CultureSource="Text">
   1234+5679=6913
</TextBlock>

Dans le correspondantes C# de code, définissez le Language propriété, par exemple, pour "ar-SA".In the corresponding C# code, set the Language property, for example, to "ar-SA".

text1.Language = System.Windows.Markup.XmlLanguage.GetLanguage("ar-SA");

Si vous devez définir le Language propriété à la langue d’interface utilisateur de l’utilisateur actuel, utilisez le code suivant.If you need to set the Language property to the current user’s UI language use the following code.

text1.Language = System.Windows.Markup.XmlLanguage.GetLanguage(System.Globalization.CultureInfo.CurrentUICulture.IetfLanguageTag);

CultureInfo.CurrentCulture représente la culture actuelle utilisée par le thread actuel en cours d’exécution.CultureInfo.CurrentCulture represents the current culture used by the current thread at run time.

Votre dernière XAMLXAML exemple doit être similaire à l’exemple suivant.Your final XAMLXAML example should be similar to the following example.

<Page x:Class="WindowsApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code Sample" Height="300" Width="300"
>
    <StackPanel>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft">عربى: 1+2=3
      </TextBlock>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft" 
         NumberSubstitution.Substitution="European">عربى: 1+2=3 
      </TextBlock>
    </StackPanel>
</Page>

Votre dernière C# exemple doit être similaire à ce qui suit.Your final C# example should be similar to the following.

namespace BidiTest
{
    public partial class Window1 : Window
    {

        public Window1()
        {
            InitializeComponent();

            string currentLanguage = 
                System.Globalization.CultureInfo.CurrentCulture.IetfLanguageTag;

            text1.Language = System.Windows.Markup.XmlLanguage.GetLanguage(currentLanguage);

            if (currentLanguage.ToLower().StartsWith("ar"))
            {
                text1.FlowDirection = FlowDirection.RightToLeft;
            }
            else
            {
                text1.FlowDirection = FlowDirection.LeftToRight;
            }
        }
    }
}

Le graphique suivant montre à quoi ressemble la fenêtre pour les deux langages de programmation, affichage des nombres arabes :The following graphic shows what the window looks like for either programming language, displaying Arabic numbers:

Graphique affichant des nombres arabes.

Utilisation de la propriété SubstitutionUsing the Substitution Property

La substitution de nombres de façon fonctionne Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) dépend de la langue de l’élément de texte et son FlowDirection.The way number substitution works in Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) depends on both the Language of the text element and its FlowDirection. Si le FlowDirection de gauche à droite, puis les chiffres européens qui sont restituées.If the FlowDirection is left to right, then European digits are rendered. Toutefois si elle est précédée par du texte arabe, ou a la langue définie à « ar » et le FlowDirection est RightToLeft, chiffres arabes sont restitués à la place.However if it is preceded by Arabic text, or has the language set to "ar" and the FlowDirection is RightToLeft, Arabic digits are rendered instead.

Toutefois, dans certains cas, il se peut que vous souhaitiez créer une application unifiée, avec par exemple des chiffres européens pour tous les utilisateurs.In some cases, however, you might want to create a unified application, for example European digits for all users. Ou des chiffres arabes dans Table cellules avec un spécifique Style.Or Arabic digits in Table cells with a specific Style. Un effectuer aisément qui utilise le Substitution propriété.One easy way to do that is using the Substitution property.

Dans l’exemple suivant, la première TextBlock n’a pas la Substitution propriété définie, l’algorithme affiche donc les chiffres arabes comme prévu.In the following example, the first TextBlock does not have the Substitution property set, so the algorithm displays Arabic digits as expected. Toutefois dans le deuxième TextBlock, la substitution a la valeur European substitution de la substitution de la valeur par défaut pour les nombres arabes et chiffres européens qui sont affichés.However in the second TextBlock, the substitution is set to European overriding the default substitution for Arabic numbers, and European digits are displayed.

<Page x:Class="WindowsApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Code Sample" Height="300" Width="300"
>
    <StackPanel>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft">عربى: 1+2=3
      </TextBlock>
      <TextBlock Language="ar-SA" 
         FlowDirection="RightToLeft" 
         NumberSubstitution.Substitution="European">عربى: 1+2=3 
      </TextBlock>
    </StackPanel>
</Page>