I have downloaded this pack : http://modernuiicons.com/ and I'm trying to use the xaml icons.
I have added a xaml file to my solution with the following content
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
Now, how do I reference this canvas to my usercontrol?
Usercontrol
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F" BorderBrush="#FF919191">
<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5">
<Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Width="230" Height="50"/>
<TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="149" Text="Onthaal Telefoon" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" FontFamily="Segoe UI Semibold"/>
<Viewbox HorizontalAlignment="Right" VerticalAlignment="Top" Height="16.5" Width="17.789" Margin="0,15,24.5,0">
// Here I want to reference the canvas
</Viewbox>
</Grid>
</UserControl>
I can copy the content of the canvas offcourse but there must be another solution.
Add the Canvas and Path as a resource on the page or in the App.xaml or whatever, remember to set x:Key. Then use a ContentControl to reference the resource.
<!-- In Resources, either on the Page or App.xaml for app-wide reuse -->
<Canvas x:Key="TickCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas
<!-- On your page, or somewhere -->
<ViewBox>
<ContentControl Content="{StaticResource TickCanvas}" />
</ViewBox>
As proof it works, I was able to see its a tick!
Just a side note, I often take just the path data, the mini-markup and save that as a string resource. Then using a Path I reference the markup resource via Data={StaticResource TickPath} that way I can resize the vector using the Height and Width on the Path itself or let it expand and shrink by its parent by setting Stretch="Uniform". Saves the overhead of the Viewbox.
<!-- In App.xaml for app-wide reuse -->
<x:String x:Key="TickPath">F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z </x:String>
<!-- On page, template or wherever -->
<Path Data="{StaticResource TickPath} />
This technique may not work in this instance as there's a clip geometry there. But for simple vectors its fine, I have hand drawn typefaces (that can't be embedded as fonts) stored as markup in files, I then load them in at runtime - Data={Binding PathData} works just as well.
A variation based on Luke's answer allowing a color to be specified down to the path.
<Style TargetType="{x:Type ContentControl}" x:Key="TickIcon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Width="{Binding Width, RelativeSource={RelativeSource AncestorType=ContentControl}}">
<Canvas x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
and
<Button Command="{Binding ConnectCommand}" VerticalAlignment="Stretch">
<WrapPanel>
<ContentControl Foreground="AliceBlue" Style="{StaticResource TickIcon}" Width="20" />
<TextBlock>Connect</TextBlock>
</WrapPanel>
</Button>
Related
I am working with the MaterialDesign Icon pack which has a single XAML with a bunch of Canvas items declared such as:
<Canvas x:Key="appbar_3d_obj" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="40" Height="40" Fill="{DynamicResource BlackBrush}" Canvas.Left="18" Canvas.Top="18" Stretch="Fill" Data="F1 M 18,21.7037L 43.9259,18L 58,25.4074L 58,54.2963L 32.8148,58L 18,49.1111L 18,21.7037 Z "/>
</Canvas>
Then in the MainWindow.xaml I have:
<Button Content="{DynamicResource appbar_3d_obj}" Margin="55,400,707,21" />
The issue I have is that while they render properly after compiling, in the Designer you can't see them as the stroke is transparent / undefined. I could set Fill="Black" in the Icons.xaml file, but it seems I should learn how to do it the right way :)
How can I set the color so I can see the icons during design time?
Hard to know how to answer for sure with the small code example you posted but have you tried simply defining the BlackBrush in the resources for either the the MainWindow's XAML (or the Canvas's)?
<Window ...>
<Window.Resources>
<SolidColorBrush x:Key="BlackBrush" Color="Black"/>
</Window.Resources>
...
</Window>
Here's a picture of the overlay from the sample app:
Here's the git page of the Material Design In XAML Toolkit (you can download the demo project here): Toolkit:https://github.com/ButchersBoy/MaterialDesignInXamlToolkit
This is probably property somewhere in the Material Design In XAML Toolkit library and i am asking if anyone knows how to set it (or if the overlay can even be turned off).
<Window x:Class="MaterialDesignColors.WpfExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample"
xmlns:domain="clr-namespace:MaterialDesignColors.WpfExample.Domain"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
xmlns:materialDesignDemo="clr-namespace:MaterialDesignDemo"
Title="Material Design in XAML" Height="800" Width="1100"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{StaticResource MaterialDesignFont}" Icon="favicon.ico">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- data template used for the dialogs example, defines a View for a ViewModel of type DateTime -->
<DataTemplate DataType="{x:Type system:DateTime}">
<StackPanel Margin="16">
<TextBlock>England win the World Cup:</TextBlock>
<TextBlock Margin="0 8 0 0" Text="{Binding }" />
<TextBlock Margin="0 8 0 0" >You will never see that again.</TextBlock>
<Button Margin="0 8 0 0" IsDefault="True" Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}" Style="{DynamicResource MaterialDesignFlatButton}">AWESOME</Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<materialDesign:DialogHost Identifier="RootDialog">
<materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
<materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel MinWidth="212">
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}"
DockPanel.Dock="Top"
HorizontalAlignment="Right" Margin="16"
IsChecked="{Binding ElementName=MenuToggleButton, Path=IsChecked, Mode=TwoWay}" />
<ListBox x:Name="DemoItemsListBox" Margin="0 16 0 16" SelectedIndex="0"
PreviewMouseLeftButtonUp="UIElement_OnPreviewMouseLeftButtonUp">
<ListBox.ItemTemplate>
<DataTemplate DataType="domain:DemoItem">
<TextBlock Text="{Binding Name}" Margin="32 0 32 0" />
</DataTemplate>
</ListBox.ItemTemplate>
<domain:DemoItem Name="Home">
...
<domain:DemoItem Name="Shadows">
<domain:DemoItem.Content>
<wpfExample:Shadows />
</domain:DemoItem.Content>
</domain:DemoItem>
</ListBox>
</DockPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
<DockPanel>
<materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth2"
Mode="PrimaryMid" DockPanel.Dock="Top">
<DockPanel>
<ToggleButton Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<materialDesign:PopupBox DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<StackPanel>
<Button Content="Hello World" Click="MenuPopupButton_OnClick"/>
<Button Content="Nice Popup" Click="MenuPopupButton_OnClick"/>
<Button Content="Goodbye" Click="MenuPopupButton_OnClick"/>
</StackPanel>
</materialDesign:PopupBox>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22">Material Design In XAML Toolkit</TextBlock>
</DockPanel>
</materialDesign:ColorZone>
<ContentControl Margin="16" Content="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.Content}" />
</DockPanel>
</materialDesign:DrawerHost>
</materialDesign:DialogHost>
</Window>
The black shade is due to a grid defined in Generic.xaml:
<Grid x:Name="PART_ContentCover" Background="{x:Null}" Opacity="0"
IsHitTestVisible="False" Focusable="False" />
Which is animated to set the opacity to 0.56 when the drawer is drawn. Unfortunatelly this grid does not belong to any template so you cannot change it in client xaml.
The other option is to change the shade's black brush which is also defined in Generic.xaml:
<SolidColorBrush x:Key="BlackBackground" Color="Black" />
But this is also something I wouldn't know how to change from a client xaml, so the only advice until someone with more WPF skillz gives a better option is to simply recompile the source and change the black brush to:
<SolidColorBrush x:Key="BlackBackground" Color="#00000000" />
Alternatively you can use the flyout control which is shown in the other demo that does not have the dark shade feature but other than that is the same.
Update: I've found one way to solve this. You can subclass DrawerHost like this:
public class DrawerHostEx : DrawerHost
{
public DrawerHostEx()
{
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var grid = GetTemplateChild(TemplateContentCoverPartName) as System.Windows.Controls.Grid;
grid.Visibility = System.Windows.Visibility.Collapsed;
}
}
Then you simply replace DrawerHost with DrawerHostEx in the XAML.
I have an user control like this.
Button
Viewbox
ContentPresenter
Grid
Path
I need to change Button.Viewbox.Grid.Path.Fill color.
Is there any way to do this?
My Style.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="PathStyle" TargetType="{x:Type Viewbox}">
<!-- ?????????????????? -->
</Style>
I tried this
<Button>
<Viewbox Width="18" Height="18" Style="{DynamicResource PathStyle}">
<ContentPresenter Content="{Binding Converter={StaticResource uriToUIElementConverter}, ConverterParameter=Images/New.xaml}"></ContentPresenter>
</Viewbox>
</Button>
New.Xaml
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="newDocument" Fill="#FF000000" Stretch="Fill">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M43,30L50.75,30 43,22.25 43,30z M52,34L39,34 39,21 24,21 24,45 20,45 20,17 43.25,17 56,29.75 56,59 34,59 34,55 52,55 52,34z M28,38L33,38 33,46 41,46 41,51 33,51 33,59 28,59 28,51 20,51 20,46 28,46 28,38z M20,59L20,52 24,52 24,55 27,55 27,59 20,59z" />
</Path.Data>
</Path>
</Grid>
Uhm,
<Path Fill="Red" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="newDocument" Stretch="Fill">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M43,30L50.75,30 43,22.25 43,30z M52,34L39,34 39,21 24,21 24,45 20,45 20,17 43.25,17 56,29.75 56,59 34,59 34,55 52,55 52,34z M28,38L33,38 33,46 41,46 41,51 33,51 33,59 28,59 28,51 20,51 20,46 28,46 28,38z M20,59L20,52 24,52 24,55 27,55 27,59 20,59z" />
</Path.Data>
</Path>
?
I have a basic WPF windows with the markup as specific below:
<Window x:Class="Application.SomeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SomeWindow"
Topmost="True" WindowStyle="None" Height="39" Width="400"
ResizeMode="NoResize" ShowInTaskbar="False"
WindowStartupLocation="Manual" Background="Transparent"
Closing="Window_Closing" AllowsTransparency="True" Opacity="0">
<Border Background="CornflowerBlue" BorderBrush="Black" BorderThickness="0,0,0,0" CornerRadius="5,5,5,5" Opacity="0.75">
<Grid>
<!-- Display bar -->
<Image Grid.Row="1" Height="24" Margin="7,7,0,0" Name="img1" Stretch="Fill" VerticalAlignment="Top" Source="/Application;component/Images/dashboard/1.png" HorizontalAlignment="Left" Width="13" />
<Image Height="24" Margin="19,7,47,0" Name="image21" Source="/Application;component/Images/dashboard/2.png" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2" />
<!-- Button 1 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,25,0" Name="btn1" Click="btn1_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="1">
<Image Height="26" HorizontalAlignment="Right" Name="img1" Source="/Application;component/Images/dashboard/3.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
<!-- Button 2 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,5,0" Name="btn2" Click="btn2_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="2">
<Image Height="26" HorizontalAlignment="Right" Name="img2" Source="/Application;component/Images/dashboard/4.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
</Grid>
</Border>
</Window>
Here is what it looks like now:
What I'd really like to do is make it so that initially looks like this:
Then, once mouseover happens, to fade background opacity in from 0 so it looks like the first image. The problem is that if I set the Border or Grid Background color to Transparent with the goal of fading in on mouseover, then everything inside the Border or Grid is affected as well.
Is there a way to manage the opacities of window and its UI elements seperately? Or perhaps there is a totally different route to take to get this background fade on mouseover? Thanks.
There are two options. Number one is to just move the outer border inside the grid, as the first child (and have the other controls alongside it, not in it). That way it will fade by itself, but still be behind the other controls. You will of course either have to set ColumnSpan/RowSpan, or wrap the entire thing in another Grid.
The second option is to just fade the background, not the entire border:
<Border ...>
<Border.Background>
<SolidColorBrush Color="CornflowerBlue" Opacity="0.5"/>
</Border.Background>
...
try this trick - draw a rectangle or border with dimensions bind to parent or ElementName.
It won't affect rest of elements of tree. Works for me.
<Grid x:Name="abc">
<Border
Width="{Binding ActualWidth, ElementName=abc}"
Height="{Binding ActualHeight, ElementName=abc}"
Background="Blue"
Opacity="0.5"/>
//buttons or inner grid
...
</Grid>
If you don'w want to use ElementName, simply replace Width and Height by
Width="{Binding ActualWidth, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
I want to alter the styling of some WPF tab headers. I would like to keep all the original styling of the tab headers, except for these three things -
Increase the height of the headers
Make the heights of each header the same. Normally the selected tab has a bigger height, I need the heights of both selected and unselected tabs to be the same.
Add a picture above the text on each header
Here is a before and after image of what I am looking to do -
Anyone know how to do this?
There you go, you can replace Stack panel with your nice images.
Update 1- in order to remove sizing effect when seelcting a tab you'll need to alter the TabItem style (header template is too light for it). Just get a StyleSnooper (http://blog.wpfwonderland.com/2007/01/02/wpf-tools-stylesnooper/) open it with VS2010 recompile it for .NET4, launch, navigate to TabItem and search for:
<Setter Property="FrameworkElement.Margin">
<Setter.Value>
<Thickness>
2,2,2,2</Thickness>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Margin" TargetName="Content">
<Setter.Value>
<Thickness>
2,2,2,2</Thickness>
</Setter.Value>
margins are the values you want to change to fix your 2. Then just put the modified version into the resources, so the app can pick it up. The style contains a lot of handy stuff you can tweak.
<Window x:Class="Immutables.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl TabStripPlacement="Left" x:Name="AreasTabControl" Margin="1">
<TabItem x:Name="AttributesTab">
<TabItem.HeaderTemplate>
<DataTemplate>
<Grid Width="100" Height="40">
<Border BorderThickness="1" BorderBrush="Gray" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<Rectangle VerticalAlignment="Top"
Width="5" Height="5" Fill="White" />
<Rectangle VerticalAlignment="Top"
Width="5" Height="5" Fill="Blue" />
<Rectangle VerticalAlignment="Top"
Width="5" Height="5" Fill="Red" />
</StackPanel>
</Border>
<TextBlock Margin="0,20,0,0">Go Russia!</TextBlock>
</Grid>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>
</Grid>
</Window>