From WPF to UWP – New controls

29 בAugust 2016

אין תגובות

For those who familiars with WPF this post is special for you while merging WPF skills with upcoming UWP skills ,
I am not gonna talk about layout here only spotting for some new features that I found nice to use.
Flyout

this new Control can gardening almost anywhere to provide extra information like tooltips or even takes  traditional Dialog places.
Flyout Demo:

<Button Width="100" Content="Hello Button" >

        <Button.Flyout>

            <Flyout Placement="Full">

                <StackPanel>

                  <TextBlock TextWrapping="Wrap" Text="This is a flyout."  />

                  <Button Content="OK" Click="FlyButton_Click" />

                </StackPanel>

             </Flyout>

         </Button.Flyout>

  </Button>


The Code snipped above is simple flyout, the flyout default behavior is per environment, so is button, the flyout control will automatically opened while clicking on the button.
Yet, closing the flyout is user depends, like in this demo the internal func FlyButton_Click can close the flyout,
More complex scenarios is for controls who don’t provide built-in flyout like Textbox.
So simple built-in attached property like:

<TextBox Width="100" Header="Hello" Height="50" >

       <FlyoutBase.AttachedFlyout>

            <Flyout Placement="Bottom">

                <TextBlock Text="This is some text in a flyout."  />

            </Flyout>

       </FlyoutBase.AttachedFlyout>

 </TextBox>

Again since it is a custom flyout the opening action is in our hands,
Like:

PointerEntered="TextBox_PointerEntered"

private void TextBox_PointerEntered(object sender, PointerRoutedEventArgs e)

        {

            FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);

        }

And off-course a similar closing event.

AutoSuggestBox

– a very useful one, we used to build this control by handmade along with Winforms and WPF,
It is a simple autoCompleted Text area to filtering over information,
BTW, watch the Header Property, it is now comes for free in many controls to obtain Brand marking of the control.
We also has an Icon..
Again this Control is good example of Thinking and Usability Orienttation..

image

So the Xaml code is:

<AutoSuggestBox  Header="AutoSuggestBox Demo" ItemsSource="{x:Bind Words}"

                       Width="200" Margin="100"  Text="{x:Bind Word, Mode=TwoWay}" QueryIcon="World">

        </AutoSuggestBox>

I am using here with x:bind tools, it will explain later in my posts, can work with directly CodeBehind and Control Name property or Data Binding (WPF style).
And the C# code is:

private string word = "";

        public string Word

        {

            get { return word; }

            set

            {

                word = value;

                Words = wordsSource.Where(x => x.StartsWith(value)).ToList<string>();

                this.Bindings.Update();

            }

        }

        private List<string> wordsSource = new List<string>() { "D", "ABC", "AA", "A", "AB", };

        public List<string> Words = new List<string>() ;


Toggleswitch

another Checkbox style Control, it widely used in Win10 OS,

image

Is has built-in Content for on and content for off, again nothing special just the attitude to simplify things to user (and to Programmers).
So, the Xaml code is simple:

<ToggleSwitch OnContent="Yes" OffContent="No"

                  Header="ToggleSwitch Demo:"  IsOn="{Binding}" />


Another nice feature  is the Spell checking around TextBox control.
Observe this snapshot: the worldd word isn’t exist so WIN10 can tell you that.

image

Thinking about win10 as global OS with supports for Smartphones it is  prompted.
So just use it:

<TextBox IsSpellCheckEnabled="True" Header="Spelling Demo" />

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *