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>
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:
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.