As the code shown, I add a ballpointpen, and it support 30 colors, but not enough.
I got colorSelected(Color type) using some other ways, not discuss here.
Now I want to click ballpointPen, using my colorSelected to draw.
How? Thanks.
<Grid>
<InkToolbar TargetInkCanvas="{x:Bind inkCanvas}" InitialControls="AllExceptPens" VerticalAlignment="Top">
<InkToolbarBallpointPenButton x:Name="ballpointPen" Click="xxx_Click"/>
<InkToolbarCustomToolButton x:Name="toolButtonColorPicker" Click="ToolButton_ColorPicker">
<Image Height="20" Width="20" Source="ms-appx:///Assets/Palette.png"/>
<ToolTipService.ToolTip>
<ToolTip Content="ColorPicker"/>
</ToolTipService.ToolTip>
</InkToolbarCustomToolButton>
</InkToolbar>
<InkCanvas x:Name="inkCanvas" Margin="0,48,0,0"/>
</Grid>
The code below seems not working...
private void xxx_Click(object sender, RoutedEventArgs e)
{
if(bUserDefinedColor)
{
InkDrawingAttributes drawingAttributes = inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
drawingAttributes.Color = colorSelected;
inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
}
}
by the way, I upload the test project to GitHub https://github.com/hupo376787/Test.git
Here is a better solution to your problem, without the need of calling UpdateDefaultDrawingAttributes directly.
What I would do is, whenever the user selects a new color from your ColorPicker and hits OK, add this color to the Palette of the InkToolbarBallpointPenButton, and then set the SelectedBrushIndex to the index of the newly created color.
In way you can completely remove your xxx_Click handler, and replace what's in LeftClick with the following
cpx.LeftClick += (ss, ee) =>
{
bUserDefinedColor = true;
colorSelected = cpx.pickerColor;
ballpointPen.Palette.Add(new SolidColorBrush(colorSelected));
ballpointPen.SelectedBrushIndex = ballpointPen.Palette.Count - 1;
};
This is it! You will see the selected color visual on the pen icon automatically reflects the new color, which gives a great user experience.
Here are two more things you might want to do to further enhance the UX.
Cache the added colors and manually add them back to the Palette at app startup so next time when the user opens the app, they are still available.
Instead of adding another icon to display the ColorPicker, try putting it inside the color popup of the InkToolbarBallpointPenButton so all color related things are in the same place. The control that sits inside this popup is called InkToolbarPenConfigurationControl. You should be able to locate its style (see path below) and add your ColorPicker to it.
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.xxxxx.0\Generic\generic.xaml
Hope this helps!
Related
I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn.
Update:
Microsoft has released an official Acrylic material document
Note:
If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.
CREATOR UPDATE
XAML
You need to use a component that you put on the background of your app, let's say a RelativePanel
<RelativePanel Grid.Column="0" Grid.ColumnSpan="2" MinWidth="40" x:Name="MainGrid" SizeChanged="Page_SizeChanged"/>
<RelativePanel Grid.Column="0" Width="{Binding ElementName=MainGrid,Path=Width}" Background="#28000000"/>
<Grid>
<!--Having content here, for example textblock and so on-->
</Grid>
The second RelativePanel is used to set the shadow color above the Blur.
.CS
And then you can use the following code :
private void applyAcrylicAccent(Panel panel)
{
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_hostSprite = _compositor.CreateSpriteVisual();
_hostSprite.Size = new Vector2((float) panel.ActualWidth, (float) panel.ActualHeight);
ElementCompositionPreview.SetElementChildVisual(panel, _hostSprite);
_hostSprite.Brush = _compositor.CreateHostBackdropBrush();
}
Compositor _compositor;
SpriteVisual _hostSprite;
and calling it with applyAcrylicAccent(MainGrid);
You also will need to handle the SizeChanged event :
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (_hostSprite != null)
_hostSprite.Size = e.NewSize.ToVector2();
}
Of course you will need to be on the Creator Update to run this, the CreateHostBackdropBrush() won't work on a mobile device, or in tablet mode.
Also, consider that the panel or grid that you set with a acrylic color won't be able to display any control (as far I've tested yet). So you need to use your relative panel without any control in it.
Transparent Title bar
The transparency of the title bar could be set using the following code
ApplicationViewTitleBar formattableTitleBar = ApplicationView.GetForCurrentView().TitleBar;
formattableTitleBar.ButtonBackgroundColor = Colors.Transparent;
CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
Here a example of what the above code generate (with some other things added too.)
Fall Update 10.0.16190 and above
As Justin XL mention in an answer below, starting from the Build 16190 and above, developers have access to different Acrylic Brushes located at Windows.UI.Xaml.Media (Acrylic API) and the guidelines from Microsoft : Acrylic material guidelines
In the Creators Update Insider Preview 16193 (along with Windows 10 SDK 16190), there's a new AcrylicBrush that you can apply directly onto your element just like a normal SolidColorBrush.
<Page xmlns:media="using:Windows.UI.Xaml.Media" ...>
<Page.Resources>
<media:AcrylicBrush x:Key="HostBackdropBrush"
BackgroundSource="HostBackdrop"
TintColor="LightBlue"
TintOpacity="0.6"
FallbackColor="LightSkyBlue"
FallbackForced="False" />
</Page.Resources>
<Grid Background="{StaticResource HostBackdropBrush}" />
</Page>
Note you can change the BackgroundSource to Backdrop to sample from the app content instead of the content behind the app window. Also make sure you define an appropriate FallbackColor because you will lose the acrylic effect when the app window has lost focus or the device is in battery saver mode.
I have a wpf application which helps customers choose a paint colour for their house. Please see image and code below.
code behind
private void REDBUTTONPICKER_Click(object sender, RoutedEventArgs e)
{
var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri(#"c:\users\user1\documents\visual studio 2015\Projects\WpfApplication7\paintpicker\RED.jpg", UriKind.Relative));
REDCOLOURPREVIEW.Background = brush;
}
buttons
<Button x:Name="REDBUTTONPICKER" Content="RED" HorizontalAlignment="Left" Height="65" Margin="46,60,0,0" VerticalAlignment="Top" Width="79" Click="REDBUTTONPICKER_Click">
<Button.Background>
<ImageBrush ImageSource="c:\users\user1\documents\visual studio 2015\Projects\WpfApplication7\paintpicker\RED.jpg"/>
</Button.Background>
</Button>
when the customer clicks review I want the colours picked on the previous page to show in the boxes on the "YOUR CHOSEN COLOURS" page. Please see image below.
The four boxes are buttons.
One way of resolving this is to use the MVVM pattern where each of the chosen colors will be bound to properties on the VM. In the selection of the color, it will also set the current unset chosen color to change.
To get an understanding of MVVM I have written a blog article
Xaml: ViewModel Main Page Instantiation and Loading Strategy for Easier Binding
which can get you started on creating a basic MVVM architecture to work with.
I have created a button using XAML and have defined some simple properties for it.
<Button Name="btnNext" Grid.Row="1" Content="PARA" Width="200" Grid.Column="1" Background="#FF2D2D2D" HorizontalAlignment="Right" FontSize="40" Height="380" BorderThickness="0" />
It happens that when I click on the button or put the mouse over, it changes color.
I have tried to escape this behaviour in the btnNext_Click method but it does not affect anything.
private void btnNext_Click(object sender, RoutedEventArgs e)
{
Button button = sender as Button;
if (button != null)
{
button.Background = new SolidColorBrush(hexToColorConvertor("#FF2D2D2D"));
START_POINT += (uint)NUMBER_OF_BUTTONS1;
ReadFile(START_POINT);
}
}
Does anyone have any idea how to resolve this?
In XAML, button have default style for different states like Normal, MouseOver, Pressed etc..
Whenever button moves from one state to another, it changes its look using default style obviously. You can find more information related to default style here
Now, If you want to override this default behavior, you can do it easily with Expression-blend. More of this can be found here and here
Hope this information will help you.. :)
I'm presently using a Windows.UI.Xaml.Controls.FlipView class to display a series of images in a Windows 8 Metro app. In the normal use case, the user can flip back and forth between the images, so a FlipView works wonderfully.
However, there is a specific scenario where the user enters a mode where they can only flip the images forward, i.e. they can't flip backward, until exiting this mode. I've been trying to figure out if there's a simple way to disable flipping backward on a FlipView, but have not found an obvious solution.
Is there a good way to do this using a standard FlipView, or do I have to switch to a different control, or even write a custom one?
What a strange request.
Hopefully, this doesn't seem too simple. It gets the job done in 3 lines!
Here's how (just remove them after they view them):
private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var _ItemsCollection = (sender as FlipView).Items;
foreach (var item in e.RemovedItems)
_ItemsCollection.Remove(item);
}
<Grid Background="Black">
<FlipView FontSize="100" SelectionChanged="FlipView_SelectionChanged">
<x:String>0</x:String>
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
<x:String>6</x:String>
<x:String>7</x:String>
<x:String>8</x:String>
<x:String>9</x:String>
<x:String>10</x:String>
<x:String>11</x:String>
<x:String>12</x:String>
<x:String>13</x:String>
<x:String>14</x:String>
<x:String>15</x:String>
<x:String>16</x:String>
<x:String>17</x:String>
<x:String>18</x:String>
<x:String>19</x:String>
<x:String>20</x:String>
<x:String>21</x:String>
<x:String>22</x:String>
<x:String>23</x:String>
<x:String>24</x:String>
<x:String>25</x:String>
<x:String>26</x:String>
<x:String>27</x:String>
<x:String>28</x:String>
<x:String>29</x:String>
</FlipView>
</Grid>
Best of luck!
I want to highlight a Line if it was clicked. Like a TreeViewItem is highlighted while it is selected or got focused (It seems, that there is a diffrence - While it is focused(and selected) its Highlight-Color is blue, if it only got selected and lost focused its grayish.).
I tried to catch the Gotfocus Event of Line without knowing which property I want to change, but it is not even firing(Though Focusable = true).
I got the MouseDown event firing(which i primarly don't want to use for this) and still don't know which property to change. Msdn and Google returns nothing senseful.
Any Ideas?
Thanks in Advance.
You can use style and triggers for this kind of work. You won't need any code only XAML will work. Create a trigger that will fire once the mouse down = true and inside that trigger change the color of line or it's background or whatever you want
see this for basics about Triggers.
Check this now.
for example
<Path Data="M101,42 L380,76" Fill="#FFF4F4F5" Height="35"
Margin="101,42,243,0" Stretch="Fill" Stroke="Black"
VerticalAlignment="Top" MouseEnter="Path_MouseEnter" Name="myLine"/>
and c#
private void Path_MouseEnter(object sender,
System.Windows.Input.MouseEventArgs e)
{
myLine.Stroke = new SolidColorBrush(Colors.Green);
}
please check now :)