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
Which 0.033:1 is the width:height ratio of my background. With this brush, the image will be stretch to suitable height.<imagebrush imagesource="/Resources/Image/pattern.png" tilemode="FlipY" viewport="0,0,0.033,1" viewportunits="RelativeToBoundingBox" x:key="BackGroundBrush">
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.