I need to draw on canvas using a few brush patterns like "Paint" in Windows OS.
I need "oil brush" and "pastel".
As I understand, it's possible via VisualBrush.Visual (Canvas with vector paths).
<UserControl x:Class="DrawingToolbar.DTBrushParamsContainer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:DrawingToolbar"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
mc:Ignorable="d"
d:DesignHeight="395" d:DesignWidth="500">
<UserControl.Resources>
<VisualBrush
x:Key="OilBrush"
TileMode="Tile" Viewport="0,0,10,10"
ViewportUnits="Absolute" Viewbox="0,0,10,10"
ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Canvas Width="495.9968" Height="66.6656" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="55" />
</Grid.RowDefinitions>
<xctk:ColorCanvas x:Name="colorCanvas" Grid.Row="0"
Background="Transparent"
Height="145" Width="237"
UsingAlphaChannel="False" Margin="0,27,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Label Content="Цвет кисти:" HorizontalAlignment="Left" Height="27" VerticalAlignment="Top" Width="82"/>
<Label Content="Толщина кисти:" HorizontalAlignment="Left" Height="27" VerticalAlignment="Top" Width="103" Margin="242,176,0,0"/>
<Slider x:Name="brushSizeSlider" HorizontalAlignment="Left" Margin="242,203,0,0" VerticalAlignment="Top" Width="237" Maximum="100"/>
<Label Content="Прозрачность цвета кисти:" HorizontalAlignment="Left" Height="27" VerticalAlignment="Top" Width="179" Margin="0,176,0,0"/>
<Slider x:Name="transparencySlider" HorizontalAlignment="Left" Margin="0,203,0,0" VerticalAlignment="Top" Width="237" Maximum="255"/>
<Label Content="Стиль кисти:" HorizontalAlignment="Left" Height="27" VerticalAlignment="Top" Width="103" Margin="242,0,0,0"/>
<RadioButton x:Name="normalBrush_rb" Content="Обычная кисть" HorizontalAlignment="Left" Margin="242,27,0,0" VerticalAlignment="Top" IsChecked="True"/>
<RadioButton x:Name="oilBrush_rb" Content="Кисть для масла" HorizontalAlignment="Left" Margin="242,77,0,0" VerticalAlignment="Top"/>
<RadioButton x:Name="pastelBrush_rb" Content="Пастель" HorizontalAlignment="Left" Margin="242,127,0,0" VerticalAlignment="Top"/>
<InkCanvas x:Name="normalBrush_ink"
Background="White"
HorizontalAlignment="Left" Height="30" Margin="242,42,0,0" VerticalAlignment="Top" Width="248">
</InkCanvas>
<InkCanvas x:Name="oilBrush_ink"
Background="White"
HorizontalAlignment="Left" Height="30" Margin="242,92,0,0" VerticalAlignment="Top" Width="248">
<Line X1="10" X2="100" Y1="15" Y2="15" Visibility="Visible" StrokeThickness="5" Stroke="{StaticResource OilBrush}">
</Line>
</InkCanvas>
<InkCanvas x:Name="pastelBrush_ink"
Background="White"
HorizontalAlignment="Left" Height="30" Margin="242,142,0,0" VerticalAlignment="Top" Width="248"/>
</Grid>
</UserControl>
In my app, I need to draw line on canvas with pattern (sample for user) and to draw, using this pattern, by mouse.
Can you help me with drawing, using brush pattern (step-by-step) in xaml and|or programmatically? It can be vector in xaml or image file using.
Brush pattern (.eps)
Brush pattern (.svg)
Source link of brush
Brush pattern (.xaml)
Now, I draw in xaml, using Brush pattern, but this is not oil brush (like in default paint app):
Related
I am trying to make an image stretch to fit the screen with preserverd aspect ratio. I thought this code would do the trick:
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenHeight}" Stretch="Uniform" StretchDirection="Both"/>
Regretably it seems like the image just fits to the width of the screen and crops it at the bottom.
The complete xaml code looks like this:
enter co<Window x:Class="ImageExplorer.MainWindow"
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:local="clr-namespace:ImageExplorer"
mc:Ignorable="d"
Title="MainWindow" WindowState="Maximized" Background="Black">
<StackPanel>
<Border BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Uniform" StretchDirection="Both"/>
</StackPanel>
Use DockPanel instead
<DockPanel LastChildFill="True">
<Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Fill" StretchDirection="Both"/>
</DockPanel>
A large black area appears on the right side of the window when I run the program, and I can't figure out why. It's not there in the preview on the XAML file page in Visual Studio 2017, and I ran it once on a Windows 7 computer, and the black area wasn't there (I'm primarily on Windows 10). The problem could possibly be in another file, but I cannot find it.
<Window x:Class="Project.Widget"
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:local="clr-namespace:Project"
mc:Ignorable="d"
Title="Menu"
WindowStartupLocation="Manual"
ResizeMode="NoResize"
Width="109"
SizeToContent="WidthAndHeight"
WindowState="Minimized"
Background="#2D3A48"
Topmost="False"
Loaded="Window_Loaded"
Closing="Window_Closing" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="77"/>
<RowDefinition Height="28"/>
<RowDefinition Height="90"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Image x:Name="Icon"
Source="./Resources/Icon.png"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="77"
Width="109" />
<Label x:Name="labelUsername"
Grid.Row="1"
Content=""
FontSize="14"
Foreground="White"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Label x:Name="labelScore"
Grid.Row="2"
Content="0%, 0 of 0"
Foreground="White"
FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,0,0,0" />
<Image x:Name="AvgScoreDot"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="50"
Source=".\Resources\yellow_dot.png"
Margin="0,32,0,0"/>
<Label x:Name="labelAvgScore"
Grid.Row="2"
Content="0.0"
Foreground="White"
FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,35,0,0"
FontWeight="Bold" />
<Button x:Name="MailBtn"
Grid.Row="3"
Height="60"
Width="109"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="#FF2D3A48"
Click="Mail_Click" >
<Button.Background>
<ImageBrush
ImageSource="/Resources/mail.png"
Stretch="None" />
</Button.Background>
</Button>
<Button x:Name="MailBadgeBtn"
Grid.Row="3"
Content="0"
Foreground="White"
FontSize="11"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Height="20"
Width="20"
Margin="0,30,24,10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Click="MailBadgeBtn_Click" BorderThickness="0">
<Button.Background>
<ImageBrush
ImageSource=".\Resources\red_dot.png" />
</Button.Background>
</Button>
<TextBlock x:Name="labelConnection"
Grid.Row="0"
Text=" No Connection or blocked by Firewall"
Foreground="Red"
Background="White"
TextWrapping="Wrap"
TextAlignment="Center"
VerticalAlignment="Center"
Height="77"
Width="109"
HorizontalAlignment="Center" />
</Grid>
Here's an image of what I get when I run it:
Here's what I get when I remove SizeToContent="WidthAndHeight" and add a height of 300 (I also had to remove your event handlers since I don't have that code, and add garbage images to the Resources folder since I don't have the original images):
Is that more like what you were looking for? You can also choose to explicitly set SizeToContent to "Manual".
In Windows 10 Universal app development the ScrollViewer causes App crashes. In the Windows dev Center this was also mentioned but not solved (https://social.msdn.microsoft.com/Forums/windowsapps/en-US/a737f407-d59f-4b10-a7d0-de9ead6d4f5f/uwpscrollviewer-occasional-crash?forum=wpdevelop).
Now my Problem:
I put a second grid on the Standard one of the xaml file. Then I added the ScrollViewer to this grid. After that i put another grid on the scrollviewer and then i added some Buttons to this grid. When scrolling the app crashes very often.
Do you have any idea how to fix that or how it can be done different?
Here the Code:
<Page
x:Class="ProjectMoralsKite.Datenbank"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ProjectMoralsKite"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="grid">
<Grid.Background>
<ImageBrush Stretch="Fill"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="529" Margin="10,10,0,0" VerticalAlignment="Top" Width="340" BorderThickness="0,-1,0,0" Background="White" Opacity="0.6"/>
<TextBlock x:Name="textBlock" TextAlignment="Center" HorizontalAlignment="Left" Margin="6,70,0,0" TextWrapping="Wrap" Text="Verwaltung" VerticalAlignment="Top" Width="340" FontSize="29.333"/>
<Button x:Name="button" Content="Zurück" HorizontalAlignment="Left" Margin="10,507,0,0" VerticalAlignment="Top" Width="150" Click="button_Click"/>
<ScrollViewer HorizontalAlignment="Left" Height="380" Margin="10,109,0,0" VerticalAlignment="Top" Width="340">
<Grid HorizontalAlignment="Left" Height="655" VerticalAlignment="Top" Width="340">
<Button x:Name="button1" Content="Plan" HorizontalAlignment="Left" Margin="0,24,0,0" VerticalAlignment="Top" Height="54" Width="340"/>
<Button x:Name="button1_Copy" Content="Kunden" HorizontalAlignment="Left" Margin="0,83,0,0" VerticalAlignment="Top" Height="54" Width="340" Click="button1_Copy_Click"/>
<Button x:Name="button1_Copy1" Content="Baustellen" HorizontalAlignment="Left" Margin="0,142,0,0" VerticalAlignment="Top" Height="54" Width="340" Click="button1_Copy1_Click"/>
<Button x:Name="button1_Copy2" Content="Aufträge" HorizontalAlignment="Left" Margin="0,201,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33000000" Click="button1_Copy2_Click"/>
<Button x:Name="button1_Copy3" Content="Zuweisung" HorizontalAlignment="Left" Margin="0,260,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33FF0000"/>
<Button x:Name="button1_Copy4" Content="Rechteverwaltung" HorizontalAlignment="Left" Margin="0,319,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33FF0000"/>
</Grid>
</ScrollViewer>
</Grid>
</Page>
I'm working on wpf application , and i want to use the shape of an exsiting image . i made the background of the windows transparent and i added the image , and some buttons but when i excute the application nothing apears .
here is the code
<Controls:MetroWindow x:Class="Selen.Wpf.DemoApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:System="clr-namespace:System;assembly=mscorlib" Title="A propos "
Height="300" Width="450" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" TitleForeground="#999988" Background="Transparent"
WindowStyle="None" ShowMaxRestoreButton="False" SizeToContent="WidthAndHeight" AllowsTransparency="True" >
<Grid >
<Border CornerRadius="20,20,20,20" Background="Cornsilk"/>
<Image Height="300" Width="450" Name="test" Source="test1.png" Visibility="Visible"
Stretch="Fill" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<Button x:Name="projet" Width="40" Background="Transparent" Visibility="Visible" Margin="64,0,346,260" Click="projet_Click" Cursor="Hand" Height="40" VerticalAlignment="Bottom" >
<Image Width="40" Height="40" Source="pro.png"></Image>
</Button>
<Button x:Name="equipe" Background="Transparent" Width="40" Visibility="Visible" Margin="105,0,305,260" Click="equipe_Click" Cursor="Hand" >
<Image Source="equ.png" Width="40" Height="40" ></Image>
</Button>
<Button x:Name="outils" Width="40" Background="Transparent" Margin="146,0,264,260" Visibility="Visible" Click="outils_Click" Cursor="Hand" Height="40" VerticalAlignment="Bottom" >
<Image Source="outi.png" Width="40" Height="40" ></Image>
</Button>
<TextBlock x:Name="titr" Height="30" Width="350" Margin="10,67,90,203" FontSize="16" TextDecorations="Underline" Foreground="White" Text="Modélisation des surfaces topographique :" />
<TextBlock x:Name="txt" Height="180" Width="300" Margin="10,102,140,18" Text="le text sera met ici" Foreground="White" />
<Image x:Name="image" Height="100" Width="100" Margin="328,130,22,70" />
</Grid>
how can i solve that problem ?
ps : i did already add the image to the project .
You have to use Source="/ApplicationName;component/Images/imagename.png" .
Under the brush catagory in your pages properties Select the background (Has an image icon)
Then set the image source to your picture. it should be in the drop down list
Change the build action of the images to 'Resource'. Also your images path seems to be wrong.
Your Project Setup should like this,
and XAML is
<Grid >
<Border CornerRadius="20,20,20,20" Background="Cornsilk"/>
<Image Height="300" Width="450" Name="test" Source="Images/test1.png" Visibility="Visible"
Stretch="Fill" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<Button x:Name="projet" Width="40" Background="Transparent" Visibility="Visible" Margin="64,0,346,260" Click="projet_Click" Cursor="Hand" Height="40" VerticalAlignment="Bottom" >
<Image Width="40" Height="40" Source="Images/equ.png"></Image>
</Button>
<Button x:Name="equipe" Background="Transparent" Width="40" Visibility="Visible" Margin="105,0,305,260" Click="equipe_Click" Cursor="Hand" >
<Image Source="Images/outi.png" Width="40" Height="40" ></Image>
</Button>
<Button x:Name="outils" Width="40" Background="Transparent" Margin="146,0,264,260" Visibility="Visible" Click="outils_Click" Cursor="Hand" Height="40" VerticalAlignment="Bottom" >
<Image Source="Images/pro.png" Width="40" Height="40" ></Image>
</Button>
<TextBlock x:Name="titr" Height="30" Width="350" Margin="10,67,90,203" FontSize="16" TextDecorations="Underline" Foreground="White" Text="Modélisation des surfaces topographique :" />
<TextBlock x:Name="txt" Height="180" Width="300" Margin="10,102,140,18" Text="le text sera met ici" Foreground="White" />
<Image x:Name="image" Height="100" Width="100" Margin="328,130,22,70" />
</Grid>
</Grid>
How could we arrange the controls on a WPF window so that it would automatically align the controls while switching between view modes occur ie between landscape and portrait mode.
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>