views:

21

answers:

1

I'm trying to alter the listboxitem style for a silverlight menu.

The result I need should look like something like this

Is this even possible?, if so:
How can i accieve this?

The current Xaml code used for the menu:

<Style x:Key="LeftMenuStyle" TargetType="ListBoxItem">

  <StackPanel Orientation="Horizontal" Margin="12">
   <Border BorderBrush="OliveDrab" CornerRadius="40" BorderThickness="5">
    <Image Source="../Resources/cancel.png" Width="50" Height="50"  />
   </Border>
   <Border CornerRadius="5" Width="180" >
    <Border.Background>
     <SolidColorBrush Color="OliveDrab"/>
    </Border.Background>
    <Border Padding="10,0,0,0">
     <ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding Content}" />
    </Border>        
   </Border>
  </StackPanel>
 </Grid>
</ControlTemplate>

A: 

You could try to model that shape with Expression Design or a similar tool (actually I don't know if a similar tool exists); at least that's the easiest solution I'd go for. You can even import Adobe Illustrator files if it's easier to design the shapes there. And you obtain XAML that you can use directly, including any complex shapes.

Note: Expression Design is part of Expression Studio.

As a quick example (I just joined a circle and a rectangle together), the result XAML is this:

<Path Width="197" Height="64.5" 
Canvas.Left="32.8333" Canvas.Top="41.6667" Stretch="Fill" 
StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" 
Data="F1 M 65.0833,42.1667C 76.8868,42.1667 87.186,48.6077 92.6577,58.1667L 229.333,58.1667L 229.333,90.1667L 92.3654,90.1667C 86.8243,99.4496 76.6798,105.667 65.0833,105.667C 47.5483,105.667 33.3333,91.4517 33.3333,73.9167C 33.3333,56.3817 47.5483,42.1667 65.0833,42.1667 Z "/>

And on that note, I strongly recommend using Adobe Illustrator or equivalent program and importing the files in Expression Design; its capabilities are still minimal when it comes to vector graphics, especially for someone used to AI. Also, you can import AI files directly into Blend.

Alex Paven
Thanks, for now I used your created path to accieve the result I needed. I will look into the Expression studio approach soon. Thanks for that suggestion.
PietjePoeier