0

Bing Maps で使用するテンプレートを設計しようとしています。基本テンプレートから始めて、いくつかのビットを切り取り、さらにいくつかのビットを追加しましたが、少し混乱しています!

私が達成しようとしているのは、より多くの情報を挿入できる各側面から出てくるツールヒントのように見える画鋲です (ただし、これらは実際にはツールヒントではありません。バインディング プロパティに基づいて永続的に表示されます)。何かのようなもの...

私がこれまでに持っているもの

ご覧のとおり、私はあまりアーティストではなく、実際にはあまり進んでいません!

誰か助けてくれませんか?私が望むのは、ピンの両側にあるオレンジ色のバーに、バインディングに基づいてテキストを含めることができるようにすることです (バーは必要に応じて拡大する必要があります)。バインディング (IsLeftTextVisible/IsRightTextVisible など) に応じて、一方または両方のバーを非表示にすることもできます。名前は後で変更できます)、またはバインドされたフィールドにテキストが含まれていない場合でも。

また、オレンジ色のバーをもう少し良くしたいと思っています。しかし、誰かが私がテキストを表示できるようになるのを手伝ってくれるなら、私は(うまくいけば)そこからそれを取ることができるはずです.

ここに私が持っているものを生成するコードがあります...

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF">

  <ControlTemplate x:Key="PushpinTemplate" 
    TargetType="{x:Type m:Pushpin}">

    <Grid Grid.Name="LayoutRoot"
      FrameworkElement.Height="{TemplateBinding FrameworkElement.Height}"
      FrameworkElement.Width="{TemplateBinding FrameworkElement.Width}">

      <Canvas FrameworkElement.Height="35"
        FrameworkElement.HorizontalAlignment="Left"
        FrameworkElement.VerticalAlignment="Top"
        FrameworkElement.Width="34">

        <Path x:Name="CollectionTextPath"
          Fill="{TemplateBinding Background}"
          Data="M 0,20 H100 V-20 H-0"
          Canvas.Left="20"
          Stretch="Fill"
          Width="100"
          Height="18.905"
          Canvas.Top="3.19"
          RenderTransformOrigin="0.5,0.5" >

          <Path.RenderTransform>
            <TransformGroup>
              <ScaleTransform ScaleX="1"/>
              <SkewTransform/>
              <RotateTransform/>
              <TranslateTransform/>
            </TransformGroup>
          </Path.RenderTransform>

        </Path>

        <Path x:Name="DeliveryTextPath"
          Fill="{TemplateBinding Background}"
          Data="M 0,20 H100 V-20 H-0"
          Canvas.Left="-81"
          Stretch="Fill"
          Width="100"
          Height="18.905"
          Canvas.Top="4.19"
          RenderTransformOrigin="0.5,0.5" >

          <Path.RenderTransform>
            <TransformGroup>
              <ScaleTransform ScaleX="-1"/>
              <SkewTransform/>
              <RotateTransform/>
              <TranslateTransform/>
            </TransformGroup>
          </Path.RenderTransform>

        </Path>

        <Path x:Name="Path_0"
          Stretch="Fill"
          StrokeLineJoin="Round"
          Stroke="#FF333333"
          Fill="#FFFFFFFF"
          Data="F1M13.25,0.50001502C20.2917,0.50001502 26,6.2083602 26,13.25 26,17.817347 23.598524,21.823648 19.989363,24.075348 18.67861,25.105957 17.863953,27.531982 17.863953,27.531982L13.21736,39.595642 8.6221838,27.528591C8.6221838,27.528591 7.8198605,25.084908 6.6245556,24.145586 2.952121,21.907652 0.5,17.865215 0.5,13.25 0.5,6.2083602 6.2083402,0.50001502 13.25,0.50001502z"
          UseLayoutRounding="False"
          Height="39.694"
          Width="26"
          Canvas.Left="8.282"
          Canvas.Top="0.001" />

        <Ellipse Height="21"
          Width="21"
          Fill="{TemplateBinding Background}"
          Canvas.Top="2.434"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Canvas.Left="10.806"
          Stroke="{x:Null}" />

        <Ellipse Height="18.905"
          Width="18.905"
          Canvas.Top="3.19"
          Canvas.Left="11.911"
          Stroke="{x:Null}">

          <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1"
              StartPoint="0.5,0">
              <GradientStop Color="#00FFFFFF"
                Offset="0.438" />
              <GradientStop Color="#6EFFFFFF"
                Offset="0.987" />
            </LinearGradientBrush>
          </Ellipse.Fill>

        </Ellipse>

        <UIElement.RenderTransform>
          <TransformGroup>
            <TranslateTransform TranslateTransform.X="-4" />
          </TransformGroup>
        </UIElement.RenderTransform>

      </Canvas>

      <Grid FrameworkElement.HorizontalAlignment="Center"
        FrameworkElement.VerticalAlignment="Top"
        FrameworkElement.Margin="0,2,0,0"
        FrameworkElement.Height="22"
        FrameworkElement.Width="21">

        <ContentPresenter ContentPresenter.Content="{TemplateBinding ContentControl.Content}"
          FrameworkElement.HorizontalAlignment="Center"
          FrameworkElement.VerticalAlignment="Center" />

      </Grid>

    </Grid>

  </ControlTemplate>

  <Style x:Key="{x:Type m:Pushpin}"
    TargetType="{x:Type m:Pushpin}">
    <Setter Property="Template"
      Value="{StaticResource PushpinTemplate}" />
  </Style>

</ResourceDictionary>

お察しのとおり、キャンバス、グリッド、楕円 (見栄えの良い部分) は元のテンプレートのものです。次に、2 つのパスを追加しましたが、それらの中にテキストを配置する方法について途方に暮れています (配置する場所があれば、おそらく問題なくテキストをバインドできます)。

これはちょっとした質問だと思います。しかし、少しグラフィカルで、私を少し前進させてくれる人がいますか。どんな助けでも大歓迎です。

4

1 に答える 1

0

レイアウトを十分に拡張しました。

于 2012-12-01T13:20:43.707 に答える