I have a data template formatting items in a ListBox
<DataTemplate x:Key="ChildViewModelTemplate">
<Border BorderBrush="#FFDC1C1C" BorderThickness="1" >
<Grid>
<TextBlock Text="{Binding Path=DisplayName}"></TextBlock>
<Image Height="Auto" Margin="0,0,2,0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="31" Source="pack://siteoforigin:,,,/rocket.ico"/>
</Grid>
</Border>
</DataTemplate>
This puts a border around each item extending to the length of the text string bound in the TextBlock binding.
Is there a simple way to have all elements the same width, where the width is equal to the longest element? For bonus points I'm wondering if there is a way to do it for the longest visible element and/or longest element regardless if it's visible.
Thanks
You might want to have a look at the Grid.IsSharedSizeScope and SharedSizeGroup Properties.
Here's a tutorial for it:
http://blogs.interknowlogy.com/johnbowen/archive/2007/08/27/21132.aspx
Following up on Botz3000's answer. SharedSizeGroup is the way to go here. This will do it
<ListBox ...
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="#FFDC1C1C" BorderThickness="1" >
<Grid>
<TextBlock Text="{Binding Path=DisplayName}"></TextBlock>
<Image Height="Auto" Margin="0,0,2,0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="31" Source="C:\C1.png"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
My MainWindow is built with TabContol containing in each tab UserControl in xaml files. Opening specific UserControl is not a problem, but aligning it is. I was able to horizontally center content of tab but struggle to vertically do this same. I found out that the root problem is that UserControl don't take the whole free space (height) in the Tab. I tried to make main grid VerticalAlignment="Stretch" and "Center" but that didn't help. I could use margin with specific number or define row fixed hight but that will not work on every resolution and I don't want to write method in code behind but use the power of xaml. How can I force UserControl to take whole height in Tab and then vertically center it (it's important to do it for specific UserControl because others should have default position)?
ps. I'm using MetroWindow from MahApps.Metro.
MainWindow main Grid:
<Grid>
<StackPanel>
<TabControl ItemsSource="{Binding Tabs}"
SelectedIndex="0">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment"
Value="Center" />
</Style>
<DataTemplate DataType="{x:Type VMod:LoginViewModel}">
<Pages:LoginView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:AdminViewModel}">
<Pages:AdminView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:ProductsViewModel}">
<Pages:ProductsView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:DistributionViewModel}">
<Pages:DistributionView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SummaryViewModel}">
<Pages:SummaryView />
</DataTemplate>
<DataTemplate DataType="{x:Type VMod:SettingsViewModel}">
<Pages:SettingsView />
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate DataType="{x:Type inter:ITab}">
<TextBlock>
<Run Text="{Binding TabName}" />
</TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</StackPanel>
</Grid>
UserControl main Grid:
<Grid Background="LightBlue"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Height="300"
Width="300"
Grid.Row="2"
BorderBrush="LightGray"
BorderThickness="1">
<StackPanel HorizontalAlignment="Center">
<iconPacks:PackIconRPGAwesome Kind="Honeycomb"
HorizontalAlignment="Center"
Width="60"
Height="60"
Margin="0, 0, 0, 0"/>
<TextBlock HorizontalAlignment="Center"
Text="DistributionTool"
FontSize="20"
FontWeight="Bold"
Margin="5" />
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Margin="5"
TextAlignment="Left"
FontSize="15"/>
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="AccountTie"
Width="20"
Height="20"
VerticalAlignment="Center"/>
</Grid>
<Grid Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<PasswordBox Grid.Column="0"
Margin="5"
HorizontalContentAlignment="Left"
FontSize="15"
Style="{StaticResource Win8MetroPasswordBox}" />
<iconPacks:PackIconMaterial Grid.Column="1"
Kind="Key"
Width="20"
Height="20"
VerticalAlignment="Center" />
</Grid>
<Button Content="LOGIN"
Width="80"
metro:ControlsHelper.ContentCharacterCasing="Normal"
Margin="5"
Style="{StaticResource AccentedSquareButtonStyle}" />
</StackPanel>
</Border>
</Grid>
From what I gather, what you could try would be:
Remove the StackPanel in your MainWindow Grid. Unless you intend to have more than 1 child inside the stack panel (Other than your TabControl), it is useless.
Add VerticalAlignement="Stretch" to your TabControl. This will allow it to take up all the space it can vertically.
Then you should be pretty much set to go.
The reason why you shouldn't use a StackPanel unless you intend to stack items inside, as in
<StackPanel>
<Child1/>
<Child2/>
</StackPanel>
is that the StackPanel.Orientation property affects how things will appear inside, including the Alignement of each child.
So Orientation="Vertical" (the default), affects the VerticalAlignement of its children. Same idea with Horizontal.
I have the following StackPanel inside a ScrollViewer that shows User Control elements Whenever a specific event occurs:
Note: many UserControls might appear in the StackPanel that's why I added a Scrollviewer
<ScrollViewer
VerticalScrollBarVisibility="Auto"
Grid.Row="2"
CanContentScroll="True"
Grid.ColumnSpan="2">
<StackPanel Orientation="Vertical">
<ItemsControl ItemsSource="{Binding UserControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:UserControl/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
Although, the StackPanel is still going out of range and the scroll bars doesn't show and doesn't work!
I tried fixing the height of both the StackPanel and the ItemsControl but it does't seem to work either...
Window Layout containing the ScrollViewer:
<Grid Margin="0,15,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label
Content="This is a Label"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="5,5,0,0"
FontSize="15"
Grid.Row="0" Grid.ColumnSpan="2">
</Label>
<StackPanel Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="2">
<ComboBox
ItemsSource="{Binding Something}"
Text="Confirm with..."
SelectedItem="{Binding Something}"/>
<Button
HorizontalAlignment="Left"
Margin="5"
Content="Add new UserControl"
Command="{Binding Path=AddUserControl}"/>
</StackPanel>
<ScrollViewer
VerticalScrollBarVisibility="Auto"
Grid.Row="2"
CanContentScroll="True"
HorizontalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<ItemsControl ItemsSource="{Binding UserControls}" Height="300">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:UserControl/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</Grid>
Here's my UserControl that is added to the StackPanel Inside the ScrollViewer:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel
Orientation="Horizontal"
Grid.Row="0">
<Button
Name="DeleteFilter"
HorizontalAlignment="Left"
Margin="5"
Content="-"/>
<ComboBox
Margin="5"
IsEditable="False"
IsReadOnly="True"
Width="150"
ItemsSource="{Binding SomeObject}"
DisplayMemberPath="Name"
SelectedItem="{Binding SomeObjectProperty}"/>
<ComboBox
Margin="5"
IsEditable="False"
IsReadOnly="True"
Width="150"
ItemsSource="{Binding AnotherObject}"
DisplayMemberPath="Name"
SelectedItem="{Binding AnotherObjectProperty}"/>
<TextBox
x:Name="Value"
Text="{Binding TextBoxValueString}"
TextAlignment="Center"
Width="100"
Margin="5"
Visibility="{Binding TextBoxVisibility}"/>
</StackPanel>
</Grid>
I'm new to XAML and WPF.
Any Suggestions?
ScrollViewers and StackPanel don't work well together. This is because a StackPanel measures its child elements with infinite horizontal space if its Orientation property is set to Horizontal and infinite vertical space if it is set to Vertical. Please refer to my answer here for more information:
How to scroll the datagrid in stackpanel?
So you should replace the StackPanel with another Panel or remove it altogether:
<ScrollViewer
VerticalScrollBarVisibility="Auto"
Grid.Row="2"
CanContentScroll="True"
HorizontalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding UserControls}" Height="300">
<ItemsControl.ItemTemplate>
<DataTemplate>
<views:UserControl/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I was able to get it run with this setting:
<ScrollViewer HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
Grid.RowSpan="10">
<StackPanel Orientation="Vertical"
Grid.RowSpan="6"
Name="SPanel"
Margin="0,0,-0.4,1.4"
CanVerticallyScroll="True">
<Border BorderBrush="Black"
BorderThickness="1"
Margin="3"
Grid.Row="0"
Name="ChartHolder0">
<dvc:Chart Cursor="Cross"
Background="#FFFFFCF2" />
</Border>
<Border BorderBrush="Black"
BorderThickness="1"
Margin="3"
Grid.Row="0"
Name="ChartHolder0">
<dvc:Chart Cursor="Cross"
Background="#FFFFFCF2" />
</Border>
<Border BorderBrush="Black"
BorderThickness="1"
Margin="3"
Grid.Row="0"
Name="ChartHolder0">
<dvc:Chart Cursor="Cross"
Background="#FFFFFCF2">
</dvc:Chart>
</Border>
</StackPanel>
</ScrollViewer>
And this is what I get:
Was looking for a fix for this problem and Mishka's answer worked for me.
I don't have enough reputation to comment on an answer, but wanted to say that Background="White" fix from Mishka does work for me on Silverlight (didn't try WPF).
<ScrollViewer Background="White">
<StackPanel Margin="5" Background="White">
Works, if I only put Background on the StackPanel the 5 pixel Margin on the stackpanel doesn't scroll. If I don't put Background on either then both the 5 pixel margin and any margins on controls inside the stackpanel dont scroll.
You are missing a Background for either the StackPanel or ItemsControl(Your choise).
Default Background is Null.
With Background Null, the ScrollViewer doesn't get mouse events for the mouse wheel,
and doesn't scroll.
I am attempting to create an onscreen keyboard using a Grid for key layout. Each key consists of a Border with a TextBlock containing a letter. To make the letters scale I have wrapped each TextBlock in a ViewBox, for example;
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Border BorderThickness="1" BorderBrush="Gray">
<Viewbox>
<TextBlock Text="a" />
</Viewbox>
</Border>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Border BorderThickness="1" BorderBrush="Gray">
<Viewbox>
<TextBlock Text="b" />
</Viewbox>
</Border>
</Grid>
<Grid Grid.Row="0" Grid.Column="2">
<Border BorderThickness="1" BorderBrush="Gray">
<Viewbox>
<TextBlock Text="c" />
</Viewbox>
</Border>
</Grid>
</Grid>
The problem is when you shrink the control by resizing the window horizontally (i.e. squash the borders together horizontally). As each letter has a slightly different width and height, the amount of zooming/scaling applied by each viewbox is not exactly the same. This results in the letters being rendered at different vertical heights, i.e. the "b" will be on a horizontal plane above the "a" and "c", which looks a little wrong.
The only work around I can think of (which works) relies on fixing the widths of each textblock, e.g. setting Width="10". This, however, feels unsatisfactory as it requires knowledge of the font which will be used to display each letter and an assumption about the maximum width. A middle ground would be to achieve this automatically the largest possible letter/glyph in each viewbox by including a hidden letter in each textblock;
<Grid Grid.Row="0" Grid.Column="0">
<Border BorderThickness="1" BorderBrush="Gray">
<Viewbox>
<Grid>
<TextBlock Text="a" />
<TextBlock Text="X" Visibility="Hidden" />
</Grid>
</Viewbox>
</Border>
</Grid>
I don't like that solution though and would love a reliable way to ensure all textblocks are the same size and so scale acceptably, without hard coding values or assumptions about the font.
Any ideas?
Thanks.
Using a uniform grid and binding to a primary textblock you get a pretty decent scaling:
<UniformGrid Rows="3" Columns="10">
<Viewbox>
<Border>
<TextBlock TextAlignment="Center"
Width="{Binding ActualWidth, ElementName=textBlock, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=textBlock, Mode=OneWay}">
Q
</TextBlock>
</Border>
</Viewbox>
<Viewbox>
<Border>
<TextBlock x:Name="textBlock" TextAlignment="Center">
W
</TextBlock>
</Border>
</Viewbox>
<Viewbox>
<Border>
<TextBlock Width="{Binding ActualWidth, ElementName=textBlock, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=textBlock, Mode=OneWay}"
TextAlignment="Center">
E
</TextBlock>
</Border>
</Viewbox>
<Viewbox>
<Border>
<TextBlock Width="{Binding ActualWidth, ElementName=textBlock, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=textBlock, Mode=OneWay}"
TextAlignment="Center">
R
</TextBlock>
</Border>
</Viewbox>
</UniformGrid>
You'll see each control is bound to the W key - assuming that is the biggest. If you are unsure, you can add a different element as hidden and bind to that - as you implied in your question. The important thing is that the grid sets the size of the main control element.
This MSDN question is answered correctly; http://social.msdn.microsoft.com/Forums/vstudio/en-US/c052fa89-4788-4d85-b266-fdd5c637a0ff/sharing-viewbox-zoom-level-between-items?forum=wpf
The solution relies on leveraging the SharedSizeGroup behaviour on a grid to ensure that the viewbox of every key is the same size as every other viewbox, like so;
<Viewbox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="col"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="row"/>
</Grid.RowDefinitions>
<TextBlock Text="a" />
</Grid>
</Viewbox>
Other solutions involving hard coding the width/height of the viewbox, or binding to a common viewbox and filling it with the largest possible glyph work, but are not perfect solutions. The above solution makes no assumptions and relies on built in WPF measure/arrange logic to produce the desired outcome.
Is there possibility to display two TextBlock on a Grid ?
I tried, but i see only my first TextBlock.
Here is my XAML code :
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<StackPanel Orientation="Horizontal">
<Grid Height="89" Width="975">
<TextBlock x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" Margin="12,23,479,30" />
<TextBlock x:Name="TxtBox_NomTiers" Margin="501,23,14,24" TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks a lot :)
Grid is the best UI container which supports orientation. You can modify your code in the below way.
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<Grid Height="89" Width="975">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="TxtBox_CodeTiers" Grid.Column=0 TextWrapping="Wrap" Text="{Binding m_strCode}" />
<TextBlock x:Name="TxtBox_NomTiers" Grid.Column=1 TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should have to adjust the column column width as per your requirement.
Both of your texts are drawn at the same location.
You can either add Grid columns/Raws or remove the grid completly and stay with the stackPanel
You should go over Panels Overview
I am trying to modify my simple control so that the text box does not grow as the user types in long text. I took a look at some solutions posted here at Stackoverflow that suggest using a Grid and an invisible Border and binding the Width of the text box to the ActualWidth of the Border, but I can't seem to get it to work in my setup.
Here is the xaml of my control:
<StackPanel Margin="5,0">
<WrapPanel Margin="0,0,0,5">
<TextBlock Foreground="White" Margin="0,0,2,0">TEXT</TextBlock>
<TextBlock Foreground="#FF0099CC" FontWeight="Bold">MORE TEXT</TextBlock>
</WrapPanel>
<Border Margin="2,4,0,4" BorderThickness="1" SnapsToDevicePixels="True" Background="Black"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<StackPanel Orientation="Horizontal">
<Image Source="..\Resources\zoom.png" Width="13"/>
<TextBox Foreground="White" Background="Black" BorderBrush="Transparent">THIS IS SOME TEXT</TextBox>
</StackPanel>
</Border>
</StackPanel>
Any ideas? I need the zoom.png to appear "inside" of the text box so I use a horizontal stack panel and just place the image and text box side by side, both surrounded by the same border.
Is there a way for me to stop my text box from auto growing as text is typed?
Thanks.
UPDATE:
Below is the xaml I am testing with.
<Window x:Class="Desktop.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:composite="http://www.codeplex.com/CompositeWPF"
Title="MyShell" Height="50" Width="900"
WindowStyle="None"
ShowInTaskbar="False"
AllowsTransparency="True"
Background="Transparent"
ResizeMode="CanResizeWithGrip"
WindowStartupLocation="CenterScreen">
<Border BorderBrush="Black"
BorderThickness="1.5"
CornerRadius="5"
Background="Gray">
<ItemsControl composite:RegionManager.RegionName="MainRegion">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Border>
</Window>
<UserControl x:Class="Desktop.SearchTextBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="50" Margin="0">
<StackPanel Margin="5,0">
<WrapPanel Margin="0,0,0,5">
<TextBlock Foreground="White" Margin="0,0,2,0">TEXT</TextBlock>
<TextBlock Foreground="#FF0099CC" FontWeight="Bold">MORE TEXT</TextBlock>
</WrapPanel>
<Border Margin="2,4,0,4" BorderThickness="1" SnapsToDevicePixels="True" Background="Black"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<Grid x:Name="grdTest">
<Image HorizontalAlignment="Left" Source="..\Resources\zoom.png" Width="13"/>
<TextBox Margin="16,0,0,0" Foreground="White" Background="Black" BorderBrush="Transparent" Width="{Binding ElementName=grdTest, Path=ActualWidth}">THIS IS SOME TEXT</TextBox>
</Grid>
</Border>
</StackPanel>
</UserControl>
I just add my user control to the Window's MainRegion.
I did some more searching and found the solution. I used the below Grid to replace the grid in my original post and now the text box keeps its original size and does not auto grow on long user input. Thanks to all who looked into this.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="..\Resources\zoom.png" Width="13"/>
<Border x:Name="b" Grid.Column="1"/>
<TextBox Width="{Binding ActualWidth, ElementName=b}" Foreground="White" Background="Black" BorderBrush="Transparent"
Grid.Column="1"
VerticalAlignment="Center"
Text="THIS IS SOME TEXT"/>
</Grid>
Try to put ScrollViewer.HorizontalScrollBarVisibility="Disabled" inside Grid.
Name the Grid as x:Name="grdTest" and try this
<Grid x:Name="grdTest">
<Image HorizontalAlignment="Left" Source="..\Resources\zoom.png" Width="13"/>
<TextBox Margin="16,0,0,0" Foreground="White" Background="Black" BorderBrush="Transparent"
Width="{Binding ElementName=grdTest, Path=ActualWidth}">THIS IS SOME TEXT</TextBox>
</Grid>
To stop the grow behavior set an explicit size to the TextBox or place it in a grid with the HorizontalAlignment set to stretch
Option 1:
<TextBox Width="60">THIS IS SOME TEXT</TextBox>
Option 2:
<TextBox HorizontalAlignment="Stretch">THIS IS SOME TEXT</TextBox>
I had a very similar issue, and it turned out that my Window property "SizeToContent" was set to "WidthAndHeight", I removed setting that property, (which then defaults to "Manual") and this fixed my similar issue.
To scale the border containing the textbox to the width of the outter stack panel, change the inner stack panel to a grid and set a left margin on the text box so it doesn't overlap with the image. Also set the image's horizontal alignment to left (if that is where you want it) or it will default to the center of the border.
<StackPanel Margin="5,0">
<WrapPanel Margin="0,0,0,5">
<TextBlock Foreground="White" Margin="0,0,2,0">TEXT</TextBlock>
<TextBlock Foreground="#FF0099CC" FontWeight="Bold">MORE TEXT</TextBlock>
</WrapPanel>
<Border Margin="2,4,0,4" BorderThickness="1" SnapsToDevicePixels="True" Background="Black"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<Grid>
<Image HorizontalAlignment="Left" Source="..\Resources\zoom.png" Width="13"/>
<TextBox Margin="16,0,0,0" Foreground="White" Background="Black" BorderBrush="Transparent">THIS IS SOME TEXT</TextBox>
</Grid>
</Border>
</StackPanel>
This article shows a solution for a textbox that is displayed inside a scrollviewer's viewport (in treeview or listbox). A PART_MeasureTextBlock is used (bound to the textbox) to determine the available size and set it to the textbox.
Please have look here and tell me what you think about it:
http://www.codeproject.com/Articles/802385/A-WPF-MVVM-In-Place-Edit-TextBox-Control