how to define fontstyle for textsymbol?

DanDong · ‎04-02-2011

Hi all,

I am using this way to add text to the map:

<esriSymbols:TextSymbol x:Name="AddTextSymbol" Foreground="Black" FontSize="14" />

GraphicsLayer graphicsLayer = MyMap.Layers["MyAddGraphicsLayer"] as GraphicsLayer;

ESRI.ArcGIS.Client.Graphic graphic = new ESRI.ArcGIS.Client.Graphic()
{
     Geometry = e.MapPoint,
     Symbol = AddTextSymbol
};
graphicsLayer.Graphics.Add(graphic);

But it seems that textsymbol doesn't have a fontstyle property. ..So does anyone know how to set the fontstyle for textsymbol (regular, bold or itallic) Thank you very much 🙂

DominiqueBroux · ‎04-04-2011

FontStyle is not a property of the TextSymbol.
So, if you want to set the FontStyle, you have to change the template of the TextSymbol:

For example:

esri:TextSymbol FontFamily="Arial" FontSize="14" Foreground="Black" Text="My Text" >
<esri:TextSymbol.ControlTemplate>
<ControlTemplate>
<TextBlock Text="{Binding Symbol.Text}" 
                       FontFamily="{Binding Symbol.FontFamily}"
                       FontSize="{Binding Symbol.FontSize}"
                       Foreground="{Binding Symbol.Foreground}"
                       FontStyle="Italic"
                       FontWeight="Bold"/>
</ControlTemplate>
</esri:TextSymbol.ControlTemplate>
</esri:TextSymbol>

DanDong · ‎04-04-2011

FontStyle is not a property of the TextSymbol.
So, if you want to set the FontStyle, you have to change the template of the TextSymbol:

That is so great!! Thank you Dominique!

I will put a combo box in the user interface for user interactively choosing the fontstyle (regular, bold or italic), so do I need to give a x:name to this textblock and change its fontstyle when combo selection changes?

DominiqueBroux · ‎04-05-2011

I need to give a x:name to this textblock and change its fontstyle when combo selection changes?

Unfortunately it's not that easy to change a template by code.

Depending on your context, I see two options:

your write your own TextSymbol class (by subclassing MarkerSymbol since TextSymbol is sealed) and add 'FontStyle' and 'FontWeight' dependency properties. Then these properties will be useable like 'FontFamiliy', 'FontSize', ... with TextSymbol

if the FontStyle is per graphic, you might store it in an attribute of the graphics (by code). Then you can define your textsymbol with a binding to Attributes:

 
<esri:TextSymbol FontFamily="Arial" FontSize="14" Foreground="Black" Text="My Text" >
<esri:TextSymbol.ControlTemplate>
<ControlTemplate>
<TextBlock Text="{Binding Symbol.Text}" 
                       FontFamily="{Binding Symbol.FontFamily}"
                       FontSize="{Binding Symbol.FontSize}"
                       Foreground="{Binding Symbol.Foreground}"
                       FontStyle="{Binding Attributes[FontStyle]}
                       FontWeight="{Binding Attributes[FontWeight]}"/>
</ControlTemplate>
</esri:TextSymbol.ControlTemplate>
</esri:TextSymbol>

DanDong · ‎04-06-2011

Unfortunately it's not that easy to change a template by code.

Depending on your context, I see two options:

your write your own TextSymbol class (by subclassing MarkerSymbol since TextSymbol is sealed) and add 'FontStyle' and 'FontWeight' dependency properties. Then these properties will be useable like 'FontFamiliy', 'FontSize', ... with TextSymbol

if the FontStyle is per graphic, you might store it in an attribute of the graphics (by code). Then you can define your textsymbol with a binding to Attributes:

Thank you Dominique!! That is very helpful. I use the second option from your suggestion and since the fontfamily, fontsize, foreground are also have multiple options in the combox from the user_interface, I bind them all to the graphic's attributes.

<esri:TextSymbol x:Name="AddTextSymbol" >
                <esri:TextSymbol.ControlTemplate>
                    <ControlTemplate>
                        <TextBlock Text="{Binding Attributes[Text]}" 
                       FontFamily="{Binding Attributes[FontFamily]}"
                       FontSize="{Binding Attributes[FontSize]}"
                       Foreground="{Binding Attributes[Foreground]}"
                       FontStyle="{Binding Attributes[FontStyle]}"
                       FontWeight="{Binding Attributes[FontWeight]}"
                                   />
                    </ControlTemplate>
                </esri:TextSymbol.ControlTemplate>
            </esri:TextSymbol>

And use them in the code-behind:

ESRI.ArcGIS.Client.Graphic graphic = new ESRI.ArcGIS.Client.Graphic()
                {
                    Geometry = e.MapPoint,
                    Symbol = AddTextSymbol
                };

                graphic.Attributes["Text"] = AddTextTextBox.Text;               
                graphic.Attributes["FontFamily"] = AddTextFontCombo.SelectedItem.ToString();
                graphic.Attributes["FontSize"] = AddTextSizeCombo.SelectedItem.ToString();
                graphic.Attributes["Foreground"] = AddTextColorCombo.SelectedItem.ToString();

                if (AddTextStyleCombo.SelectedItem.ToString() == "Italic")
                {
                    graphic.Attributes["FontStyle"] = "Italic";
                }

                else if (AddTextStyleCombo.SelectedItem.ToString() == "Regular")
                {
                    graphic.Attributes["FontStyle"] = "Normal";
                }

                else if (AddTextStyleCombo.SelectedItem.ToString() == "Bold")
                {
                    graphic.Attributes["FontWeight"] = "Bold";
                }
              
                graphicsLayer.Graphics.Add(graphic);

I would also need rotation options(from combox in user_interface) for this textsymbol in fact. I check the properties for textsymbol and I notice there is a render transform. I am not sure whether it supports angle rotation? Such as +(clockwise) 45 degreen or -(counterclockwise) 30 degreen?

ChristopherHill · ‎04-06-2011

Hi,

You can use the RenderTransform you mention to apply a RotationTransform to the TextBlock
<TextBlock FontSize="14" Canvas.Left="17" Canvas.Top="100" Foreground="Blue" Text="45 Degree Text" >
        <TextBlock.RenderTransform>
          <TransformGroup>
                <RotateTransform Angle="-45"/>
          </TransformGroup>
        </TextBlock.RenderTransform>
    </TextBlock>

DanDong · ‎04-06-2011

Hi,

You can use the RenderTransform you mention to apply a RotationTransform to the TextBlock
<TextBlock FontSize="14" Canvas.Left="17" Canvas.Top="100" Foreground="Blue" Text="45 Degree Text" >
        <TextBlock.RenderTransform>
          <TransformGroup>
                <RotateTransform Angle="-45"/>
          </TransformGroup>
        </TextBlock.RenderTransform>
    </TextBlock>

Hi Chris,

That works very well!! Thank you all for the help! Here I also share my codes. I bind the angle attribute to the graphic and get the value from user's interaction with combox (by choosing + or -, and choosing the angle value).

<esri:TextSymbol x:Name="AddTextSymbol" >
                <esri:TextSymbol.ControlTemplate>
                    <ControlTemplate>
                        <TextBlock Text="{Binding Attributes[Text]}" 
                       FontFamily="{Binding Attributes[FontFamily]}"
                       FontSize="{Binding Attributes[FontSize]}"
                       Foreground="{Binding Attributes[Foreground]}"
                       FontStyle="{Binding Attributes[FontStyle]}"
                       FontWeight="{Binding Attributes[FontWeight]}">
                       <TextBlock.RenderTransform>
                           <TransformGroup>
                               <RotateTransform Angle="{Binding Attributes[Angle]}"/>
                           </TransformGroup>
                       </TextBlock.RenderTransform>     
                        </TextBlock>
                    </ControlTemplate>
                </esri:TextSymbol.ControlTemplate>
            </esri:TextSymbol>

This is the entire setting for my textsymbol.