Trying to implement color picker in uwp - xaml

I'm trying to implement color picker in uwp using below link
[1]: http://www.c-sharpcorner.com/article/coding4fun-colorpicker-control-in-uwp-with-xaml-and-c-sharp/
but while following process and implementing colorchange event it is giving error "unable to add event handler".Any idea would be appreciated
XAML
xmlns:my="using:Coding4Fun.Toolkit.Controls"
<my:ColorPicker x:Name="W_Paints"
Margin="216,203,-6,0" Height="40"
Width="40" VerticalAlignment="Top"
HorizontalAlignment="Left"/>

I tried to create a color picker with Coding4Fun package by following the above link and the color picker is successfully created with no error on my side.
I used version 2.1.8, and also test version 2.1.7 which also worked. My uwp app target version is build 14393, but I also test with target version 10240. So if you created a uwp app with "Coding4Fun Toolkit - Controls" 2.1.7 or 2.1.8 should be able work well. Here is the demo completing code.
XAML Code
<Page
x:Class="Coding4fun.MainPage"
...
xmlns:my="using:Coding4Fun.Toolkit.Controls" >
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="419,42,0,0" TextWrapping="Wrap" Text="Code4Fun ColorPicker control Demo" VerticalAlignment="Top" Height="37" Width="427" FontSize="24" FontWeight="Bold" />
<Button x:Name="btnCPopen" Content="Open Color Picker" HorizontalAlignment="Left" Margin="110,113,0,0" VerticalAlignment="Top" RenderTransformOrigin="-5.01,1.529" ToolTipService.ToolTip="Open color Picker for changing Background" Click="btnCPopen_Click" />
<Border x:Name="BorCP" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="378" Margin="838,113,0,0" VerticalAlignment="Top" Width="354" />
<my:ColorPicker x:Name="CPtest" HorizontalAlignment="Left" Height="358" Margin="284,113,0,0" VerticalAlignment="Top" Width="374" ColorChanged="CPtest_ColorChanged" Visibility="Collapsed" />
</Grid>
Code behind
private void btnCPopen_Click(object sender, RoutedEventArgs e)
{
CPtest.Visibility = Visibility;
}
private void CPtest_ColorChanged(object sender, Windows.UI.Color color)
{
BorCP.Background = new SolidColorBrush(color);
}
I also upload the demo here you can download for testing and compare what's wrong with your project.

Related

Windows UWP ScrollViewer scrollbar overlaps contents

How do you stop a ScrollViewer's scrollbar from overlapping content like this?
I have a RichTextBlock containing text and no matter how wide I make the RichTextBlock, or how I change the Margin and Padding values, I cannot get the scrollbar to move further to the right to stop this overlap from happening. I'm running Windows 10 and it is configured to hide scrollbars until the mouse pointer hovers over them.
Below is the XAML for my app.
<Page
x:Class="PaulWinPOS1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PaulWinPOS1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="0,26,0,0">
<Button x:Name="butConnect" Content="Connect" Margin="0,38,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Click="ButConnect_Click" Width="92"/>
<Button x:Name="butLogin" Content="Login" Margin="0,92,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" IsEnabled="False" Click="ButLogin_Click"/>
<Button x:Name="butAdd" Content="Add Item" Margin="0,143,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Width="92" IsEnabled="False" Click="ButAdd_Click"/>
<ScrollViewer x:Name="scrollViewerWeb"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Left"
Width="350"
Padding="16,0"
Grid.RowSpan="10"
FontFamily="Segoe UI" RequestedTheme="Dark" ZoomMode="Enabled"
Margin="669,304,0,0" >
<WebView x:Name="webviewReceipt"
Margin="10,10,50,10"
HorizontalAlignment="Left"
Height="333" Width="300"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
<Button x:Name="butDisconnect" Content="Disconnect" Margin="0,244,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" Click="ButDisconnect_Click"/>
</Grid>
</Page>
The scroll bar of WebView is special and cannot be solved by the conventional ScrollViewer additional properties, but the scroll bar of the WebView can be disabled through the CSS of the web page.
body {
-ms-overflow-style: none;
}
If you cannot modify the source code of the webpage, you can perform the following operations after the WebView content is loaded:
private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
string js = "var style = document.createElement('style');" +
"style.type = 'text/css';" +
"style.innerHTML = \"body{ -ms-overflow-style: none !important; }\";" +
"document.getElementsByTagName('Head').item(0).appendChild(style); ";
await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}
Update
If we need to display a scroll bar, we can add a padding-right to the body so that the scroll bar does not block the content.
private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
string js = "var style = document.createElement('style');" +
"style.type = 'text/css';" +
"style.innerHTML = \"body{ padding-right: 24px; }\";" +
"document.getElementsByTagName('Head').item(0).appendChild(style); ";
await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}
You need to add a Padding to ScrollViewer.
<ScrollViewer Padding="18, 0">
<RichTextBlock />
</ScrollViewer>
Usually the ScrollBar Width is 18.
It looks like you have the scroll bars enabled on both the web view and scroll viewer. You can try disabling the scroll bars on one of them to see if it makes a difference.

how to put images on tabs (pivots) in windows 10 app

I have read most of the Windows 10 UI design guidelines and here are some pictures of examples of a pivot navigation that is essentially a tab navigation with images: https://msdn.microsoft.com/en-us/library/windows/apps/dn997788.aspx#examples
I was unable to find out how to put images on these tabes (pivotitems).
<Pivot x:Name="mainTabs">
<PivotItem x:Name="Header1" Header="Header1" Background="{x:Null}" Foreground="{x:Null}"/>
<PivotItem x:Name="Header2" Header="Header2"></PivotItem>
<PivotItem x:Name="Header3" Header="Header3"></PivotItem>
<PivotItem x:Name="Header4" Header="Header4"></PivotItem>
<PivotItem x:Name="Header5" Header="Header5"></PivotItem>
</Pivot>
HeaderTemplate works OK for replacing text with pictures but then text is missing, and I would like to keep the text like shown in Windows 10 UI guidelines.
<Pivot x:Name="mainTabs">
<Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}"></Image>
</DataTemplate>
</Pivot.HeaderTemplate>
<PivotItem x:Name="Header1" Header="Assets/play1.png"></PivotItem>
<PivotItem x:Name="Header2" Header="Assets/play2.png"></PivotItem>
</Pivot>
Nokia Developer website had some really great article about how to make a tabbed pivot headers like official Instagram or Twitter app in Windows Phone.However , that article is not available for now because Microsoft decided to ignore all of Nokia Developer content , unfortunately.
I researched a bit and found this article instead
http://depblog.weblogs.us/2013/08/29/twitterate-your-windows-phone-app/
PivotItem headers' are being used in PivotHeaderTemplate AFAIR.Basically you can follow the article above or just change your Pivot's HeaderTemplate.
Write a converter that converts your Header property to Text and returns it.
public class ImageToTextConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var sent = value as string;
switch(sent)
{
case "Assets/play1.png":
return "Play 1 Header";
case "Assets/play2.png":
return "Play 2 Header";
default:
return string.Empty;
}
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
Add this converter's namespace to your XAML and define it in your Resources.Then change your template as
<DataTemplate>
<StackPanel>
<Image Source="{Binding}"></Image>
<TextBlock Text="{Binding Source='',Converter={StaticResource ImageToTextConverter}}" />
</StackPanel>
</DataTemplate>
I know this post is old and no one likes to kick a dead horse, but I figured I might share my solution that doesn't rely on a value converter and allows you to simply set an image with text. Just for anyone who is looking to add images or anything to a pivot item since there does not seam to be a simple solution out there.
Add a stack panel to the pivot item header with image and text. That's it.
<Pivot x:Name="Tabs" Grid.Row="1" Grid.Column="0" >
<PivotItem>
<PivotItem.Header>
<StackPanel VerticalAlignment="Top">
<Image Width="25" Height="25" Source="../Assets/Home.png"/>
<TextBlock Text="Home Tab"/>
</StackPanel>
</PivotItem.Header>
<Grid>
<TextBlock Text="asdfasfasdfasdfasdf"/>
</Grid>
</PivotItem>
<PivotItem>
<PivotItem.Header>
<StackPanel VerticalAlignment="Top">
<Image Width="25" Height="25" Source="../Assets/Schedule.png"/>
<TextBlock Text="Home Tab"/>
</StackPanel>
</PivotItem.Header>
<Grid>
<TextBlock Text="134123475"/>
</Grid>
</PivotItem>
</Pivot>

WP 8.1 ToggleButton Change Icon when Checked / UnChecked

I have the following XAML code for Windows Phone 8.1 (non SilverLight):
<Grid>
<ToggleButton Name="TogBtn" VerticalAlignment="Center" HorizontalAlignment="Center" Checked="ToggleButton_OnChecked">
<SymbolIcon Symbol="play"></SymbolIcon>
</ToggleButton>
</Grid>
The output of the above code is:
How can I change the icon to a stop icon when the toggle button is checked and then back to play icon when unchecked?
I thought this would be easy to find through Google, but apparently not.
Please change your XAML to this:
<Grid>
<ToggleButton x:Name="TogBtn" HorizontalAlignment="Center" VerticalAlignment="Center" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked">
<SymbolIcon Symbol="Play"></SymbolIcon>
</ToggleButton>
</Grid>
And please add this to your .cs file:
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
TogBtn.Content = new SymbolIcon(Symbol.Stop);
}
private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
TogBtn.Content = new SymbolIcon(Symbol.Play);
}
That should do the job!

Displaying a Progress Bar

I have an image control in my main page and the code is as follows:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel HorizontalAlignment="Left" Height="597" VerticalAlignment="Top" Width="440">
<Image x:Name="hinh1" Height="488" Stretch="Fill"/>
<ProgressBar Name="loading" Height="10" IsIndeterminate="True" Visibility="Collapsed"/>
</StackPanel>
</Grid>
and in code behind i have this code :
Uri hinh = new Uri
("http://taigamejar.net/wp-content/uploads/2014/01/Hinh-Anh-Dep-5.jpg", UriKind.Absolute);
hinh1.Source = new BitmapImage(hinh);
While waiting for the image to load, I want to call progress bar run to inform the user that it is loading. Once the the image has loaded, the progress bar should disappear. How can I do this?
If I were you, I would prefer to use , not ProgressBar.
So, I'll give
protected override void OnNavigatedTo(NavigationEventArgs e)
{
loading.IsActive = true;
Uri hinh = new Uri
("http://taigamejar.net/wp-content/uploads/2014/01/Hinh-Anh-Dep-5.jpg", UriKind.Absolute);
hinh1.Source = new BitmapImage(hinh);
hinh1.ImageOpened+=hinh1_ImageOpened; //loadingbar will be disappear when this triggered
}
private void hinh1_ImageOpened(object sender, RoutedEventArgs e)
{
loading.IsActive = false; //this will disable the progressring.
}
And XAML:
<StackPanel HorizontalAlignment="Left" Height="597" VerticalAlignment="Top" Width="400">
<Image x:Name="hinh1" Height="488" Stretch="Fill" ImageOpened="hinh1_ImageOpened"/>
<ProgressRing Name="loading" Height="109" IsActive="True" />
</StackPanel>
If you don't have WP8.1 SDK yet, you can get ProgressRing here: http://www.onurtirpan.com/onur-tirpan/english/windows-phone-english/using-progressring-in-windows-phone/

watermarked PasswordBox in winrt

is it possible to get a watermarks passwordbox in WinRt? It is no problem to get a textbox with a watermark, but I don't know a toolkit where I can get a password box with a watermark.
How can I implement one for myself?
Take a look on WinRT XAML Toolkit.
They also have
WatermarkTextBox
WatermarkPasswordBox
By yourself you can implement your own controls:
in .xaml:
<Border x:Name="brdPassword" Margin="5,0,5,10" BorderThickness="2" BorderBrush="White" CornerRadius="5" Grid.Row="0"
Background="White" Height="50" VerticalAlignment="Stretch">
<Grid>
<TextBox x:Name="PasswordWatermark" TextWrapping="Wrap"
Text="Watermark" Foreground="#FFC4C4C4" IsHitTestVisible="False"
Background="{x:Null}" BorderThickness="0" Padding="0,-10"
FontSize="26.667" />
<PasswordBox x:Name="pbPassword" LostFocus="PasswordLostFocus"
GotFocus="PasswordGotFocus" Background="{x:Null}"
FontSize="26.667" Margin="0,-12,0,-9" VerticalAlignment="Center"
BorderThickness="0" Opacity="0" />
</Grid>
</Border>
in .cs
private void PasswordLostFocus(object sender, RoutedEventArgs e)
{
CheckPasswordWatermark();
}
private void CheckPasswordWatermark()
{
var passwordEmpty = string.IsNullOrEmpty(pbPassword.Password);
PasswordWatermark.Opacity = passwordEmpty ? 100 : 0;
pbPassword.Opacity = passwordEmpty ? 0 : 100;
}
private void PasswordGotFocus(object sender, RoutedEventArgs e)
{
PasswordWatermark.Opacity = 0;
pbPassword.Opacity = 100;
}
Hope it's help
I don't think we can put watermark in the Password control.
You can put a TextBox with wartermark in the same row and same column with the Password control, then handle the two controls' GotFocus and LostFocus events to make the control Visible or Collapsed.
There is no toolkit yet which provides watermarked password box. However this may help:-
http://code.msdn.microsoft.com/windowsdesktop/Watermarked-TextBox-and-444ebdec
Also, check out http://julmar.com/blog/mark/?p=300 for both a Textbox and PasswordBox implementation for WinRT.