开发者

WPF: Altering a listbox style, smoothening transition between borders

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"  /&g开发者_如何学JAVAt;
   </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:

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜