We Keep Coding

WPF ContentControl in ListViewItem is not changing it's width (not stretching) while dragging gridsplitter

So, I have a grid, containing 3 columns. 2 one is gridsplitter which is working fine.
In the first one I have a ListView
<ListView Grid.Row="1"
ItemsSource="{Binding Chats}"
Background="Transparent"
BorderThickness="0"
ItemContainerStyle="{StaticResource ContactItem}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
Then there is Style: ContactItem
<Style TargetType="{x:Type ListViewItem}" x:Key="ContactItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<l:RippleEffectDecorator Background="Black" HighlightBackground="White">
<Border Height="62" Background="Transparent" BorderThickness="0">
</Border>
</l:RippleEffectDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see there is RippleEffectDecorator - which is ContentControl(I've found it in another case). There is link on github to it: Xaml file
And Cs file
So, starting the project I have:this
When I try to drag gridsplitter I have: this
I've already tried to put HorizontalAlignment and/or HorizontalContentAlignment Stretch to ListView/to ListViewItem style/to RippleEffectDecorator style.
Not problem about anything inside RippleEffectDecorator cuz when I was writing it without this contentcontrol it was working fine.
All I need is just everything inside this RippleEffectDecorator to be able to stretch horizontally when I'm moving gridsplitter, thank you!

round combo box border

friends
i find this code to make round combo box but i don't know how to use
is there any one can help how to use this code
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Border CornerRadius="5">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
what should i do to apply this code to my combo box in wpf

This template you are showing here is just a basic idea, but not something really working. You need to override the full default template and customize it for your needs. Inside of your UserControl’s resources ass a template (just copy and paste) from this link default combobox template
<UserControl.Resources>
<!-- paste the code here-->
<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
….
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
….
</UserControl.Resources>
Then modify the border radius in two places:
…
Grid.ColumnSpan="2"
CornerRadius="<put a new radius here, for example 20>"
BorderThickness="1">
…
And here
<Border Grid.Column="0"
CornerRadius="<new value, for example 20>,0,0,<new value, for example 20>"
Margin="1" >
This should do it. Since you did not specify the key name for the template the combobox should pick a new template up automatically.

WPF 4.0 smooth-scrolling and UI visualization on custom control

My custom control should contains 1000000+ items. I've implemented the custom control based on ItemsControl. The source XAML of the control is:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="clr-namespace:MyTestApplication.Behaviors"
xmlns:helpers="clr-namespace:MyTestApplication.Helpers"
xmlns:local="clr-namespace:MyTestApplication.Controls"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
<Style TargetType="{x:Type local:RowsWrapperControl}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:RowsWrapperControl}">
<ScrollViewer x:Name="PART_ItemsScrollViewer"
Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CanContentScroll="True"
HorizontalScrollBarVisibility="Disabled"
Padding="{TemplateBinding Padding}"
VerticalScrollBarVisibility="Hidden">
<i:Interaction.Behaviors>
<behaviors:ScrollViewerOffsetBehavior VerticalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VerticalScrollOffset, Mode=OneWay}" />
</i:Interaction.Behaviors>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
The virtualizing works good, but scrolling works only item-by-item, not pixel-by-pixel. I tried to set the CanContentScroll property to False , but it breaks the visualization. I found some helpful
information here and here, but it takes no effect for me.
Any idea how to turn on the smooth scrolling?
I have .Net 4.5 installed on my PC, but the target platform is .Net 4.0.
UPDATE:
The solution was found here.

do you have a simple list of data or tree alike data structure? What does your custom control do or should do? Only TreeView in WPF .NET 4.0 supports scrolling by pixels. A ListBox scrolls by items/units. Derivate your custom control from TreeView and you should do fine. Or wrap it in a TreeView. TreeView may also display simple list of data without hierarchical structure. I actually ment many people telling me they place their lists in TreeView just to have that pixel scrolling effect because it looks better than jumping over items/units/data however you call it.
Try it out :) I could place this as comment since its too large but if it works mark it as answer.

How to use xaml vector images as image source in Windows 8 app

I created some assets in inkscape and would like to use them as icons in a windows 8 application. I have done some reading and it seams that while .Net 4.5 supports SVG, the modern ui profile does not. I converted the svg to xaml using this tool.
I get the following xaml.
<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="svg2997" Width="744.09448" Height="1052.3622" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Canvas x:Name="layer1">
<Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" />
</Canvas>
</Canvas>
If I add this directly to my apps xaml it will render however the scale is way off.
I would like to use this as an image source for an image object if possible.
<Image HorizontalAlignment="Left" Height="100" Margin="127,37,0,0" VerticalAlignment="Top" Width="100" Source="Assets/plus_circle.xaml"/>
Can this be done?

Most AppBar buttons are based on a style included in StandardStyles called AppBarButtonStyle.
To customize the text of the button you set the AutomationProperties.Name attached property, to customize the icon in the button you set the Content property, and it's also a good idea to set the AutomationProperties.AutomationId attached property for accessibility reasons.
Here's an example of a button customized using this approach:
<Style x:Key="FolderButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="FolderAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Folder"/>
<Setter Property="Content" Value=""/>
</Style>
As mentioned above, to customize the icon you set the Content property. The challenge is how you set the content so it displays your custom vector art.
It turns out you can place any path Xaml, even yours, into a Viewbox to change its scale. That was my first approach, but it doesn't work. In fact, it seems any time you use Xaml expanded notation to set the Content property for a button it doesn't work.
<Style x:Key="SquareButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="SquareAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Square"/>
<Setter Property="Content">
<Setter.Value>
<!-- This square will never show -->
<Rectangle Fill="Blue" Width="20" Height="20" />
</Setter.Value>
</Setter>
I actually think this is a bug, but luckily there is a workaround.
Tim Heuer wrote an excellent article on the simplest way to use a Xaml Path as the artwork for a button. That article is here:
http://timheuer.com/blog/archive/2012/09/03/using-vectors-as-appbar-button-icons.aspx
In short, you need to define a style that sets up all the bindings correctly:
<Style x:Key="PathAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Path Width="20" Height="20"
Stretch="Uniform"
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
Then you create a style that inherits from that style and you paste in your path. Here is the style for your artwork you listed above:
<Style x:Key="CrossButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource PathAppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="CrossAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Cross"/>
<Setter Property="Content" Value="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z"/>
</Style>
And finally, you use it in your AppBar like this:
<Button Style="{StaticResource CrossButtonStyle}" />
Dev support, design support and more awesome goodness on the way:
http://bit.ly/winappsupport

I'm pretty positive you can't just inject Path Data into an Image Source and expect it to magically work unless it's through a Drawing Object as Source. What you can however do is adopt your Path into a ContentControl for re-use in the same way without having to go through the trouble of Drawing objects for every instance.
So instead of;
<Image Source="..."/>
Just do something like this and plop it in your Object.Resources or ResourceDictionary;
<Style x:Key="YourThingy" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then just plop it on your view wherever and as many times as you like;
<ContentControl Style="{StaticResource YourThingy}"/>
You will however want to play with that Path of yours. It seems set a large size, but hopefully this provides a good alternative for your circumstance. Cheers!

WPF : Adding Border to an image programmatically

I want to add a style to the the image programmatically. Here is my code
<UserControl.Resources>
<Style x:Name="BranchPages" x:Key="BranchPages">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="2" BorderBrush="Green">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
and the code behid is as follows
Style greenbdr = (Style)FindResource("BranchPages");
page.img.Style = greenbdr;
But Its not working Please help

This workaround might help:
Since the Image has no border, place it inside a Border control.
<Border Name="imgBorder" BorderThickness="2" BorderBrush="Transparent">
<Image Name="img"></Image>
</Border>
Then create logic code against the properties of that Border.
imgBorder.BorderBrush = Brushes.Green;

An Image is not a Control, it is only derived from FrameworkElement and thus has no Template property.
It has a Style, though, so you can use it to set its properties, like Cursor, HorizontalAlignment, etc.