Develop Reference

WPF: Set ListViewItem from textblock in the Listview within a DataTemplate

I have a Windows Phone 8.1 project with a ListView that has it's itemssource filled from c# code behind. It works but i end up with empty spaces between single line textblocks. I've tried setting heights on the textblock, a grid it sits within, the listview itself. I tried setting an ItemContainerStyle with binding the height to the height of the textblock but it doesn't work.
If I set the text of the TextBlock to the Actual Height binding I get 0 so I must be doing something wrong. I'm pretty sure it has something to do with the height of the ListViewItems but since they are populated from code I can't figure out how to make them do what I want. I also tried switching to a ItemsControl for the list but it doesn't seem to scroll and work as well.
Here is the XAML of the Listview:
<ListView x:Name="TheList" IsHoldingEnabled="True"
ItemsSource="{Binding items}"
Loaded="WhenListViewBaseLoaded"
ContinuumNavigationTransitionInfo.ExitElementContainer="True"
IsItemClickEnabled="True">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="{Binding ElementName=txtBibleText, Path=ActualHeight}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="ItemTemplateGrid" Holding="ListViewItem_Holding" Background="Blue">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Share"
Click="ShareFlyoutItem_Click" />
<MenuFlyoutItem Text="Add to Sharing"
Click="AddSharingFlyoutItem_Click" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Grid x:Name="gridText">
<TextBlock x:Name="txtBibleText"
FontSize="{Binding TheFontSize}"
Grid.Column="1"
VerticalAlignment="Top"
HorizontalAlignment="Left"
TextWrapping="Wrap"
Margin="0,0,0,0" FontFamily="Global User Interface">
<Run Text="{Binding VerseNumber}"/>
<Run Text="{Binding BibleText}"/>
</TextBlock>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code behind that populates the ListView:
XDocument loadedData = XDocument.Load(TranlationFilePath);
var data = from query in loadedData.Descendants("testament").Descendants("book").Descendants("chapter").Descendants("verse")
where (string)query.Parent.Parent.Parent.Attribute("name") == GetTestament
where (string)query.Parent.Parent.Attribute("name") == GetBibleBook
where (string)query.Parent.Attribute("number") == GetChapter
select new BibleLoad
{
VerseNumber = (string)query.Attribute("number"),
BibleText = (string)query.Value.ToString(),
TheFontSize = FontSize
};
TheList.ItemsSource = data;
Thank you for your time. This is my first time posting a question so hopefully I did it right. I have searched and searched and experimented for quite awhile.
After editing the XML and making a record short.
With turning off the text wrapping.
With wrapping back on, height set to 20 and minheight set to 31.
MinHeight to 20 wrapping on:

The extra space comes from the ListViewItem template for the ItemContainerStyle. The default template includes space not only for the ItemTemplate but also for adornments such as checkboxes used to mark selection. Note the CheckboxContainers' Rectangle's Height of 25.5 and the SelectedCheckMark's Height of 34.
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}"/>
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="25.5" Stroke="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" Width="25.5"/>
<Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Opacity="0" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" VerticalAlignment="Center" Width="18.5"/>
</Grid>
and
<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
<Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
</Grid>
</Border>
If you don't need the selection behavior you can strip the ItemContainerStyle to just the pieces you need so it doesn't have to make space for adornments that aren't relevant to your app. If you do need selection you can move or resize the selection checks so they'll fit with your design.
You can generate the default ItemContainerStyle template by selecting your ListView in the designer, right clicking and chosing Edit Additional Templates.Edit Generated Item Container (ItemContainerStyle) Edit a copy...
You can then edit down the adornment Heights as needed.

Why are you trying to set minheight or height? try giving a font size and it will adjust the height itself keep the textwrapping=wrap... and another thing why are you setting grid.colum=1? ..you have only 1 column.

Toolkit chart rotate labels X-axis

First of all thank you for reading this.
I have the following problem:
I want the labels of my X-axis te be turned 90 degrees. So that the text is facing vertical instead of horizontal. My X-axis is generated automatic, but it doesn't have to be.
So that the content of the label is vertical instead of horizontal. I've tried multiple options to achieve this but none of them worked for me yet. So I really hope anybody has a clue on how to get this working. With the options I tried there was just another axis that showed up with numbers only. While the thing what I want is the labels to be turned so that all of the text fits on the axis without overlapping eachother.
The image below is the way it is right now:
And here is an example of how i would like it to be (this is made in excel):
I have looked around at more sites but i cant find one that is working for me.
Both in xaml or in the code behind are fine for me.
This is the code i am using now:
<toolkit:Chart Margin="8,72,0,8" Title="Aantal meldingen per afdeling" x:Name="chartMeldingenPerAfdeling">
<toolkit:Chart.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF476D88" Offset="1"/>
</LinearGradientBrush>
</toolkit:Chart.Background>
<toolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen"
IndependentValuePath="Afdeling" Margin="0,0,0,1"
Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center"
HorizontalContentAlignment="Center" FontSize="8"/>
<toolkit:LineSeries ItemsSource="{Binding}" DependentValueBinding="{Binding Percentage}" DependentRangeAxis="{Binding ElementName=PercentageAxis}"
IndependentValueBinding="{Binding Afdeling}" IndependentAxis="{Binding ElementName=lin}" Title="Pareto"/>
<toolkit:Chart.Axes>
<toolkit:LinearAxis Orientation="Y" Location="Left" Title="Aantal" x:Name="AantalAxis"/>
<toolkit:LinearAxis Orientation="Y" Location="Right" Title="Percentage" x:Name="PercentageAxis" Minimum="0" Maximum="100"/>
</toolkit:Chart.Axes>
</toolkit:Chart>
Thank you in advance.

please check this code:
<toolkit:Chart Title="{Binding ChartTitle}" x:Name="myChart" Style="{StaticResource myChartStyle}" BorderBrush="{x:Null}" Background="Black" Foreground="White">
<toolkit:ColumnSeries ItemsSource="{Binding LegendList}"
DependentValueBinding="{Binding FeatureQuantity}"
IndependentValueBinding="{Binding LegendName}" DataPointStyle="{Binding Source={StaticResource ColorByGradeColumn}}" >
</toolkit:ColumnSeries>
<toolkit:Chart.Axes>
<toolkit:CategoryAxis Orientation="X"
Location="Bottom"
Foreground="White">
<toolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="toolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="toolkit:AxisLabel">
<TextBlock
Text="{TemplateBinding FormattedContent}"
TextAlignment="Right"
TextWrapping="Wrap"
Width="60"
Margin="-20,15,0,0"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:CategoryAxis.AxisLabelStyle>
</toolkit:CategoryAxis>
</toolkit:Chart.Axes>
</toolkit:Chart>
and result is:
http://upload7.ir/imgs/2014-10/42094080161295718077.png

You can try this for your toolkit:ColumnSeries XAML element:
<chartingToolkit:ColumnSeries ItemsSource="{Binding}" DependentValuePath="AantalMeldingen" IndependentValuePath="Afdeling" Margin="0,0,0,1" Title="Aantal meldingen" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="8">
<chartingToolkit:ColumnSeries.IndependentAxis>
<chartingToolkit:CategoryAxis Orientation="X">
<chartingToolkit:CategoryAxis.AxisLabelStyle>
<Style TargetType="chartingToolkit:AxisLabel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:AxisLabel">
<TextBlock Text="{TemplateBinding FormattedContent}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</chartingToolkit:CategoryAxis.AxisLabelStyle>
</chartingToolkit:CategoryAxis>
</chartingToolkit:ColumnSeries.IndependentAxis>
</chartingToolkit:ColumnSeries>

Mah Apps Tile Animation

I would like to add the Live Tile effect to the tiles on my wpf app layout. I'm using the MahApps.Metro library for the visuals. Here is an example of one of the tiles that I have on the layout -
<Controls:Tile Height="110" Background="#9c6b50" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,105,33,0">
<Controls:Tile.Content>
<TextBlock Text="Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Controls:Tile.Content>
</Controls:Tile>
I'd like the end product of the tile to switch between these two texts:
Setup your Savings account
Click here to Setup your savings account

The generally accepted way to do this is by binding the Text property. A binding would look like this:
<TextBlock Text="{Binding Path=TileText}" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
What this does is bind the value of the TextBlock to a property called TileText on the DataContext of the control. You will need to look into DataContext and binding in WPF to understand this.
Once you have a class with the property:
public string TileText
{
get {...}
set {...}
}
And the class is set as the DataContext of the Tile control you can change the value of the TileText property and it will change the text of the TextBlock. This is a simple example of MVVM design and can be a good first step in understanding smart WPF design practices.
Cheers,
Eric

Try this!
<controls:Tile Height="110" Background="#9c6b50" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,105,33,0">
<controls:Tile.Style>
<Style TargetType="controls:Tile">
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content">
<Setter.Value>
<TextBlock Text="Click here to Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</controls:Tile.Style>
</controls:Tile>

Windows Phone textoutlining

is it possible to outline text in windows phone 8, for example I have red text, but I want the outline to be black?
Should I do this in xaml of C#, and also if possible how? any examples will be much appreciated
thanx

Here you can see how it WAS DONE: http://blog.mrlacey.co.uk/2010/06/silverlight-effects-and-windows-phone-7.html
It's not working anymore. Microsoft removed it, due to performance issues.
The performance hit that applications took from using these effects put too much of a strain on the system and it was decided that if we couldn’t deliver a perfomant feature we would disable until such a time as we could.
The only possibility would be to create 2 TextBlocks and change the FontSize, RenderTransfor, FontWeight,...
<TextBlock Text="{Binding ElementName=BackgroundText,Path=Text}" FontSize="25" Foreground="Red" FontWeight="ExtraBold">
</TextBlock>
<TextBlock Text="Hello" Name="BackgroundText" FontSize="25" Foreground="White" FontWeight="Bold">
<TextBlock.RenderTransform>
<TranslateTransform X="0.5" Y="0" />
</TextBlock.RenderTransform>
</TextBlock>
</TextBlock>

Since two TextBlocks with different FontWieghts won't help you with large text (just longer than simple "Hello") because bolder text will be ahead of thin one, I recommend you to use 4 TextBlocks shifted by 1 upper-left, upper-right etc. and set Opacity = 0.5 to smoothen the outline.
Here an example:
<TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
<TextBlock.RenderTransform>
<TranslateTransform X="-1" Y="1" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
<TextBlock.RenderTransform>
<TranslateTransform X="-1" Y="-1" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
<TextBlock.RenderTransform>
<TranslateTransform X="1" Y="-1" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
<TextBlock.RenderTransform>
<TranslateTransform X="1" Y="1" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Grid.Row="0"
Text="Outlined text"
FontSize="25"
Foreground="White"
FontWeight="Normal">
</TextBlock>
And style:
<Style TargetType="TextBlock" x:Key="OutlineTb">
<Setter Property="FontSize" Value="25" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Opacity" Value="0.5" />
</Style>
But keep in mind that it's quite "heavy" solution and still not as good as genuine outline.

One-sided rounded buttons in Silverlight

I want to make a collection of buttons in silverlight.
They are in a collection that goes from left to right and the buttons are lined up so that they are touching on the left and right sides.
Here is the rub:
The collection has rounded corners but the buttons in between the end buttons in the collection do not have rounded ends. So basically, for the buttons on the far left and right side of the collection, they have to be somewhat special because they have to have one flat vertical side and one rounded side. Is this possible to do in silverlight without resorting to making a special bitmap for the end buttons?
One idea I have is somehow declare a canvas with a bitmap background and then have overlapping ellipse and rectangle
<Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,0,0" VerticalAlignment="Top" Width="200" Background="Black">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="Black" Width="58" Height="61" Canvas.Left="7" Canvas.Top="16" />
<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="White" Width="65" StrokeThickness="0" Height="59" Canvas.Left="31" Canvas.Top="17" />
</Canvas>

Here is a simple example of the effect you are trying to achieve that utilizes custom ControlTemplate to skin the buttons in three ways:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="10,0,0,10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonCenterStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,0,0,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,10,10,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonCenterStyle}" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>
</Grid>
And this looks like:
There's a lot more you can do here but this shows an approach you can use. Here's a great blog article with more information and examples of this technique:
Silverlight Tutorial Part 7: Using Control Templates to Customize a Control's Look and Feel

I solved the problem by using a visual trick. First of all, my trick required I placed the buttons on an image that would represent the background. The buttons were somewhat transparent so the color of this background came through
The buttons in the middle be simple rectangle canvas classes. While the end buttons had rounded ends.
The middle buttons were in front of the buttons on the end and they overlapped them.
The buttons were transparent and so normally it would not work because you would be able to see the end buttons edges behind the middle buttons. I solved this by putting a rectangle filled with the color of the background image "between" (think in 3D layered depth terms) the end buttons and the rectangle shapped buttons in front of it. The colored rectangles only were positioned in front of the end buttons that were behind the rectangle buttons in front of them.
This was kind of a hack but it worked. When I have time, I will try the solutions suggested here.

Yeah, even simpler, based on Rick'S, as you just want to use the styles to address the rounded corners of your button template border:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<!-- Default Template -->
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="DarkGray" CornerRadius="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
<!-- Custom Styles for edges -->
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="10,0,0,10" TargetName="Border"/>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="0,10,10,0" TargetName="Border"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>