Flipping an UI element

What happens when you flip an UI element?

The following button has been flipped horizontally.

        <Button Height="50" Width="100" VerticalAlignment="Bottom">

            <Button.RenderTransform>

                <ScaleTransform ScaleX="-1"></ScaleTransform>

            </Button.RenderTransform> Flipped Button

        </Button>

The button was flipped, but it was also moved. That's because the button was flipped from its top left corner. To flip the button in place, you want to apply the ScaleTransform to its center, not its corner. An easy way to apply the ScaleTransform to the buttons center is to set the button's RenderTransformOrigin property to 0.5, 0.5.

       <Button RenderTransformOrigin=".5, .5" Height="50" Width="100" VerticalAlignment="Bottom">

            <Button.RenderTransform>

                <ScaleTransform ScaleX="-1"></ScaleTransform>

            </Button.RenderTransform> Flipped Button

        </Button>

To flip the button vertically, set the ScaleTransform object's ScaleY property.

        <Button RenderTransformOrigin=".5, .5" Height="50" Width="100" VerticalAlignment="Bottom">
            <Button.RenderTransform>
                <ScaleTransform ScaleY="-1"></ScaleTransform>
            </Button.RenderTransform> Flipped Button
        </Button>

Modified form submission app in ExtJs 5.0, MVC Web Api, Entity Framework 6 in ASP.NET

I have modified Simple application using ExtJs 5.0 (one of my previous post) using Entity framework 6, MVC Web Api, Ext Js 5.0, VS 2013. (With create, read functions in database). 

I can share the tutorial with you if requested.

https://drive.google.com/folderview?id=0B50nOWpE-RyLNG5BeFIxcWthZzQ&usp=sharing_eid

Behavior of TileMode property with its values in ImageBrush object

1) TileMode ="FlipX"

       <Grid.Background>
            <ImageBrush TileMode="FlipX" Viewport="0,0,.5,.5"
                ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg">
            </ImageBrush>
        </Grid.Background>

2)  TileMode ="FlipY"

      <Grid.Background>
            <ImageBrush TileMode="FlipY" Viewport="0,0,.5,.5"
                ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg">
            </ImageBrush>
        </Grid.Background>

3) TileMode ="FlipXY"

    <Grid.Background>
            <ImageBrush TileMode="FlipXY" Viewport="0,0,.5,.5"
                ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg">
            </ImageBrush>
        </Grid.Background>

ImageBrush object

The ImageBrush object is used to paint objects by using an image as the source for the brush.

Example:

<Window x:Class="Brushes.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>
         <Grid.Background>
            <ImageBrush
             ImageSource="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
            </ImageBrush>
        </Grid.Background>
    </Grid>
</Window>

We can select a portion of the source image to be used for painting by setting the ViewBox property.The following example shows cropping the upper left quarter of an image and using it for the ImageBrush object.

<Window x:Class="Brushes.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>

<Grid.Background>

<ImageBrush Viewbox="0,0,.5,.5"

  ImageSource="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">

</ImageBrush>

</Grid.Background>

    </Grid>

</Window>