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:
<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.
Related
I have created an extended button with 2 different border styles invoked by triggers in XAML. Both share the same contentpesenter but after changing the border style more than twice the content in the contentpresenter fails to display.
Below is a link to the entire project with a test bed application that demonstrates the issue, I think the issue is somewhere in the XAML below but I cannot see why it breaks:
Sample Button App
<Style.Resources>
<ContentPresenter x:Key="ButtonContent" Margin="5" HorizontalAlignment="Center"
Content="{Binding Content}"/>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Margin="{Binding KeyMargin}">
<Grid Visibility="{Binding RectangleVisibility}">
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=rectBorder}" />
</Grid.OpacityMask>
<Border x:Name="rectBorder"
CornerRadius="{Binding BorderCorners}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{Binding BorderThickness}"/>
<Viewbox Stretch="Fill"
StretchDirection="Both">
<ContentControl Content="{StaticResource ButtonContent}"/>
</Viewbox>
</Grid>
<Grid Visibility="{Binding EllipseVisibility}">
<Ellipse Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{Binding BorderThickness}"
Fill="{TemplateBinding Background}">
</Ellipse>
<Viewbox Stretch="Fill"
StretchDirection="Both">
<ContentControl Content="{StaticResource ButtonContent}"/>
</Viewbox>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
The problem is most likely that you cannot have the same element (the ContentPresenter in this case) in more than one place in the visual tree, and in which one of the two grids it ends up is undefined, i.e., an implementation archetype of WPF.
To get the element duplicated this might work:
<ContentControl Content="{TemplateBinding Content}"/>
or in your case
<ContentControl Content="{TemplateBinding Content}" Margin="5" HorizontalAlignment="Center"/>
instead of a static resource. The <ContentPresenter/> syntax is pretty much an optimized shortcut for that (or you could set x:Shared="False" on the resource, but having a ContentPresenter as a static resource is as far as I know not how it is intended to be used)
If the Button content is a UIElement itself though, it will be used directly itself in the visual tree, i.e., twice and this wont work either. A better solution would be to just have the content once in the control template and change the visual appearance around it, e.g., using a trigger to set the Grid's OpacityMask.
Another remark is that your control template is very tightly bound to where the Button is used, with direct bindings to the current data context, which reduces its reusability. Some easy fixes is to use TemplateBinding instead of Binding for BorderThickness respectively Margin (instead of KeyMargin), since those are existing properties of the Button.
For better reusability and cleaner code you should consider looking into creating a custom control deriving from Button with dependency properties for BorderCorners, the desired visual state (ellipse vs rectangle) etc. You might also want to use triggers to get the mouse-over effects of the button etc. Have fun control templating!
I want to attach a DropShadowEffect on a Border control. I see it on runtime but not in the designer.
<Grid>
<Border Background="LightGray"
BorderBrush="DarkGray"
BorderThickness="1"
ClipToBounds="True"
Width="400"
Height="100">
<Border Background="Transparent"
BorderBrush="Black"
BorderThickness="0,10,0,0"
Margin="0,-11,0,0">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"/>
</Border.Effect>
</Border>
</Border>
</Grid>
It's quite annoying, especially if working on custom control library.
The former and now apparently obsolete DropShadowBitmapEffect works on run- and designtime.
Edit:
This not a duplicate of other questions like Here as it is quite the opposite problem. The shadow effect appears at runtime, but not in the designer. Just try it out with NET-Framework WPF Project and the code above.
Is there a way to put a clipping path on an ImageBrush in Silverlight (not an Image)? I don't see it available from Intellisense, but I'm wondering if there may be a way to do this.
Yet another unpopular "No" answer. The answer is: there is isn't a way to do this.
One possible work around if its vital to create such a brush might be to use a WriteableBitmap. Render an Image using the original source plus the Clip onto a WriteableBitmap then use it as the source to an ImageBrush.
Maybe this will help
I had a problem with an ImageBrush and a Border with a CornerRadius. I couldn't get the Image to fill/clip to fit. I resolved it by moving the ImageBrush to the content of the Border.
Here's the original with the problem:
<Border CornerRadius="0,0,4,4" BorderThickness="0">
<Border.Background>
<ImageBrush ImageSource="/SLTest;component/Resources/background_image.png" Opacity="1" Stretch="UniformToFill" />
</Border.Background>
<ListBox x:Name="lbiMesages"
Opacity="1" BorderThickness="0"
IsHitTestVisible="False"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
>
Here's the working version:
<ListBox x:Name="lbiMessages"
Opacity="1" BorderThickness="0"
IsHitTestVisible="False"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
>
<ListBox.Template>
<ControlTemplate>
<Border CornerRadius="0,0,4,4" BorderThickness="0">
<Border.Background>
<ImageBrush ImageSource="/SLTest;component/Resources/background_image.png" Opacity="1" Stretch="UniformToFill" />
</Border.Background>
...
</Border>
</ControlTemplate>
Please pardon my ignorance- I'm very new to WPF.
I am looking to implement a minor, visual effect in my application that gives the look of "inner" rounded corners. The window in question has a dark border that encapsulates several UIElements, one of which is a StatusBar, located at the bottom of the window. This StatusBar has a dark background that matches the window's border. Above the StatusBar is a content view, which is currently a Grid- its background is semi-transparent (I think that this is something of a constraint- you can see through the content view to the desktop below). I would like for the content view (represented by the transparent, inner area in the figure below) to have the look of rounded corners, though I expect to have to sort of create the illusion myself.
(Can't post the image because I'm a lurker and not a poster- please find the drawing here)
My first approach was to add a Rectangle (filled with the same, dark color as the border) immediately above the StatusBar and to assign a Border with rounded corners to its OpacityMask (similar to the solution proposed by Chris Cavanagh**). Sadly, the effect that is produced is the exact opposite of that which I am trying to achieve.
I understand that the Clip property can be of use in this sort of situation, but it seems to me that using any sort of Geometry will prove to be inadequate as it won't be dynamically sized to the region in which it resides.
EDIT: Including my XAML:
<Grid Background="{StaticResource ClientBg}" Tag="{Binding OverlayVisible}" Style="{StaticResource mainGridStyle}">
<DockPanel LastChildFill="True">
<!-- Translates to a StackPanel with a Menu and a Button -->
<local:FileMenuView DockPanel.Dock="Top" />
<!-- Translates to a StatusBar -->
<local:StatusView DockPanel.Dock="Bottom" />
<!-- Translates to a Grid -->
<local:ContentView />
</DockPanel>
</Grid>
Any pointers are more than welcome- I'm ready to provide more indepth detail if necessary.
** http://www.dotnetkicks.com/wpf/WPF_easy_rounded_corners_for_anything
EDIT: Now I got what you mean. In fact you can use Path + OpacityMask approach. You have to draw "inverted" path, to use it as opacity mask. But I have simpler and faster solution for you :). Use Border + CornerRadius, and fill the gaps with solid paths. Just try the following code in Kaxaml and let me know if this is what you were looking for:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240"
Height="320"
AllowsTransparency="True"
Background="Transparent"
WindowStyle="None">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Border Background="Black"/>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="5">
<Grid>
<Border Background="White" CornerRadius="0, 0, 5, 5" Opacity="0.7"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<TranslateTransform X="15"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Border Grid.Row="2" Background="Black"/>
</Grid>
</Window>
PS: You can simplify this solution by avoiding render transforms, but you got the idea.
I need to have a custom UI element that can be changed, such as the colour and text used in the application but as a resource - in WPF I can use a DynamicResource to assign brushes, strings etc, however I need to implement this in Silverlight 3 - how can I do this as a StaticResource will not do, and as another question I have a resource which is made of other UI-Elements like Rectangles. See example from my existing ResourceDictionary:
<VisualBrush x:Key="Device" Stretch="Uniform">
<VisualBrush.Visual>
<Canvas Width="20" Height="36">
<Rectangle Height="36" Width="20" Fill="{DynamicResource ZuneColour}" Canvas.Left="0" Canvas.Top="0" RadiusX="1" RadiusY="1">
<Rectangle.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Black" GlowSize="2" />
</Rectangle.BitmapEffect>
</Rectangle>
<Rectangle Fill="{DynamicResource ZuneScreen}" Canvas.Left="1" Canvas.Top="1" Height="24" Stroke="#191616" Width="18"/>
<Rectangle Canvas.Left="5.5" Canvas.Top="25" Height="9" Width="9" RadiusX="3" RadiusY="3" Fill="{DynamicResource ZunePad}" Stroke="{DynamicResource ZunePadOuter}"/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
I have also had an issue with replicating the OuterGlowEffect, but at least this can be done with a compiled DirectX effect so can leave this out if needed.
I think Data Bindings will be a good solution to dynamic content as can create a Class which
stores the visual data I need and this can be a One-way binding to update the UI - hopefully this may be useful to others with the same issue.
Still need to replace VisualBrush functionality with something that will work in Silverlight for the given example.