[WPF]Background dynamic fill with one direction

I have a very long and thin image, and I want to use it as a background image in WPF application, which the image should repeat horizontally.
My first code insight is from

WPF: How do i create a background that repeats horizontally without scalling?

But, it fails to repeats properly, the reason is that ViewportUnits="Absolute", so it actually stretch my image to very large. Which is kind of hardcode.

Then I saw this reference TileBrush.Viewport Property
So I use this this code to create the background brush instead

  <imagebrush imagesource="/Resources/Image/pattern.png" 
            tilemode="FlipY" viewport="0,0,0.033,1" 
            viewportunits="RelativeToBoundingBox"
            x:key="BackGroundBrush">

Which 0.033:1 is the width:height ratio of my background. With this brush, the image will be stretch to suitable height.

For repeat horizontally, just change tilemode to FlipX and viewport to "0,0,1,x" where 1:x is the ratio.

p.s. this method is a improved version of the stackoverflow solution on the way that it can show the whole image, but the drawback is the image might be stretched for a little. And seems there is no simple way to do this without binding.

[Windows] Basic WPF UI template

When you creating a UI for your application, usually you will make several UI element of same type, it is kind of annoying if you need to copy and paste all attributes to make those object looks the same. So in XAML programming in WPF, you can define a template for your controls.

Code snapshot:

<UserControl>
    <UserControl.Resources>
        <Style x:Key="BaseBtn" TargetType="Button">
            <Setter Property="Width" Value="80px"/>
            <Setter Property="Height" Value="80px"/>
        </Style>
        <Style x:Key="BottomRightBtn" BasedOn="{StaticResource BaseBtn}" 
                TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Margin" Value="10"/>
        </Style>
        <Style x:Key="BottomLeftBtn" BasedOn="{StaticResource BaseBtn}"
                TargetType="Button">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Margin" Value="10"/>
        </Style>
    </UserControl.Resources> 
    <Grid>
        <Button Content="BaseBtn" Style="{StaticResource BaseBtn}"/>
        <Button Content="BottomLeftBtn"
                Style="{StaticResource BottomLeftBtn}"/>
        <Button Content="BottomRightBtn"
                Style="{StaticResource BottomRightBtn}"/>
    </Grid>
</UserControl>

UserControl.Resources is a nice place to put all your styles.
Note that you need to specify the TargetType in style tag. So your style can be used on this type only.
Each Setter define a single property like width and height, which should also exist in the target type.
To use the style, just use something like Style="{StaticResource ResourceKey}" to reference them.
That how you do simple sytle in WPF XAML, probably will save you some time.