We Keep Coding

Binding within a template

I have the following ControlTemplate, as shown below, and I would like to avoid hard coding the hight and width of the image, instead I would like to bind the Height and width of the Image control
<Image Source="/Rotate.Pictures;component/Images/error.png"
Stretch="Uniform"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="14"
Width="14"/>
to the TextBlock's Text (TextBlock named "ErrorText") property path = "Height". Both Height and Width of the image should be bound to the Height value of the TextBlock's Text Height property
Does anyone know how I can accomplish this?
Template:
<Grid IsSharedSizeScope="True">
<Grid.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<AdornedElementPlaceholder>
<Border BorderBrush="Red" BorderThickness="2"/>
</AdornedElementPlaceholder>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="/Rotate.Pictures;component/Images/error.png" Stretch="Uniform" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="14"
Width="14"/>
<TextBlock x:Name="ErrorText" Text="{Binding ErrorContent}" Foreground="Red"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>

Key to the answer is to reference past controls (control that the thread of execution already encountered in the "{Binding ElementName=ErrorText, Path=ActualHeight}"). So the solution uses a grid, then specify Grid.Column 1 before specifying Grid.Column 0 that references the ElementName in Grid.Column 1.
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<AdornedElementPlaceholder>
<Border BorderBrush="Red" BorderThickness="2"/>
</AdornedElementPlaceholder>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="ErrorText" Grid.Column="1" Text="{Binding ErrorContent}" Foreground="Red"/>
<Image Grid.Column="0" Source="/Rotate.Pictures;component/Images/error.png"
Height="{Binding ElementName=ErrorText, Path=ActualHeight}"
Width="{Binding ElementName=ErrorText, Path=ActualHeight}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Aligning items in GridView

I am having trouble aligning my items in my Gridview. I have a DataTemplate that has a Stackpanel within it. Inside of that Stackpanel I have 3 TextBlocks. I am unable to move those textblock where I want to in the Gridview. I will post my XAML below..
XAML
<Page.Resources>
<DataTemplate x:Key="TileTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding TitleView}" FontFamily="Segoe UI" FontWeight="SemiBold" FontSize="18" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10" />
<TextBlock Text="{Binding BodyView}" FontFamily="Segoe UI" FontWeight="Light" FontSize="14" Foreground="White" TextWrapping="Wrap" Margin="10,50" />
<TextBlock Text="{Binding AuthorView}" FontFamily="Segoe UI" FontWeight="Light" FontStyle="Italic" FontSize="10" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,10" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid x:Name="tileGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<GridView x:Name="tileGridView" Margin="12,60" ItemTemplate="{StaticResource TileTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="#2A2A2A"
Margin="5"
Height="200"
Width="300">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</GridView.ItemContainerStyle>
</GridView>
</Grid>
This is the result I am getting:
As you can see it is completely cutting out the Author and is not aligning my body correctly (via my inline styling of the textblock).
Does anyone know of a way I can manipulate the position of the textblocks in my GridView?

Set the Orientation of the StackPanel to be Vertical with a Left Horizontal Alignment and see if that gives you the desired look.

StackPanel ignore HorizontalAlignment issue XAML

I have issue, i just try to make chat window with messages(From right incoming and from left sended out) but seems like stackpanel ignore HorizontalAlignment. Here's my code
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap"
FontSize="22"
Text="{Binding MessageTextIn}"
/>
<TextBlock
FontSize="10"
Text="{Binding MessageTimeIn}" Padding="10"
/>
</StackPanel>
<StackPanel HorizontalAlignment="Right">
<TextBlock TextWrapping="Wrap"
FontSize="22"
Text="{Binding MessageTextOut}"
/>
<TextBlock
FontSize="10"
Text="{Binding MessageTimeOut}" Padding="10"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Seems like i do something wrong but what exactly?
Thanks for any help!
Sorry if i ask something stupid.

That is because your ItemContainer only has a right alignment (by default).
Set the ItemContainerStyle of your Listview:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

PivotItems do not resize after binding

I am binding a PivotItems but somehow the items are not resized properly, according to my margin declaration. Why is that?
EDIT: here is my new code and it still has gaps..
<Pivot x:Name="TpsSegmentsPivot" Title="Locator" Foreground="#FF888888" Style="{StaticResource PivotStyle1}" SelectionChanged="Pivot_SelectionChanged" Margin="0" Grid.Row="1" ItemTemplate="{StaticResource TpTemplate}" ItemsSource="{Binding DataSource}">
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding id}" Margin="0, 16, 0, 0" Foreground="#FF888888" FontSize="32" FontFamily="Segoe WP" FontWeight="Light"/>
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
</Pivot>
This is the template:
<DataTemplate x:Key="TpTemplate">
<ListBox Background="Black"
ItemsSource="{Binding Seg}"
ItemTemplate="{StaticResource SectionUCTemplate}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</DataTemplate>
Here is a screenshot with the red pivotItem..

I think the issue with the extra space is the Piviot Item you are using inside the DataTemplate tag. remove it and bind the header to a header template. I've used data binding on Pivots before and never seen this issue.
From one of my released apps:
<controls:Pivot Title="CAMPING CHECKLIST" ItemsSource="{Binding FilteredCategories}" Name="MainPivot">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<!-- Your pivot item content here -->
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
I believe the PivotItem in a PivotItem is the root of your issue.
your code should look similar to:
<controls:Pivot ItemsSource="{Binding tripTypeViewModel.TripTypeViewModelDataSource}" x:Name="TripsSegmentsPivot" Title=" " Foreground="#FF888888" Style="{StaticResource PivotStyle1}" SelectionChanged="Pivot_SelectionChanged" Grid.Row="1">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding DataContext.tripTypeViewModel.HeaderText, ElementName=TripsSegmentsPivot}" Margin="0, 16, 0, 0" Foreground="#FF888888" FontSize="32" FontFamily="Segoe WP" FontWeight="Light"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ListBox x:Name="ItemsLB" ItemsSource="{Binding DataContext.tripTypeViewModel.Segment, ElementName=TripsSegmentsPivot}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<local:SectionUC HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Top"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
The first image is how I describe it, the second is how you currently have it :

This is the standard behaviour for PivotItems since they are always displayed with a margin. You should set a negative margin:
margin="-20,0,-20,0"

Cannot select ListViewItem because a rectangle is in the way

I have a ListView bound to an ObservableCollection and when items are added to the ListView, if you hover over a ListViewItem, you will see that not only the ListViewItem itself if highlighted, but there is also another slightly-smaller, darker-blue rectangle that appears. Now this slightly smaller rectangle prevents you from being able to select the ListViewItem because it is on-top of the ListViewItem.
Why is it there and how do I get rid of it?
<Grid Margin="0, 25, 0, 22" Grid.Column="0">
<ScrollViewer ScrollViewer.CanContentScroll="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<ListView x:Name="list" ItemsSource="{Binding Source=Message}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<ListViewItem HorizontalAlignment="Stretch" Height="50">
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Sender}" HorizontalAlignment="Stretch" TextTrimming="WordEllipsis" TextWrapping="Wrap" FontWeight="SemiBold" />
<TextBlock Text="{Binding Subject}" HorizontalAlignment="Stretch" TextTrimming="WordEllipsis" TextWrapping="Wrap" />
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>

You have a ListViewItem in your ListViewItem. The ListView will automatically wrap it's items in a container so you don't have to do that. Remove the ListViewItem from your DataTemplate.

Remove ListviewItem from DataTemplate. ListView will wrap whatever is in your DataTemplate in ListViewItem. If you have something to set against ListViewItem do it through ItemContainerStyle
<ListView x:Name="list" ItemsSource="{Binding Source=Message}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding Sender}" HorizontalAlignment="Stretch" TextTrimming="WordEllipsis" TextWrapping="Wrap" FontWeight="SemiBold" />
<TextBlock Text="{Binding Subject}" HorizontalAlignment="Stretch" TextTrimming="WordEllipsis" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Height" Value="50"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>