ProgressbarStyle issues - xaml

I have a ProgressbarStyle in which I add a TextBlock-Control to the Grid "DeterminateRoot". This TextBlock should display a Status-Text, which I change manually in CodeBehind and this works already.
Here is the part of my style, which I change in the standard ProgressbarStyle:
<Grid x:Name="DeterminateRoot" Margin="1">
<Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}" RadiusY="1.5" RadiusX="1.5" StrokeThickness="0.5"/>
<TextBlock x:Name="txtbStatusText" Text="5 of 20" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontWeight="Bold" FontFamily="Arial" FontSize="11"></TextBlock>
</Grid>
My question is: How can I change the Foregroundcolor of the TextBlock-Text to black, without changing the standardcolor of the progressbar? Because, when I delete the Fill-Property of the Rectangle (ProgressBarIndicator), then I can change the ForegroundColor of my TextBlock, but I want to keep the standardlook of the Progressbar!
Thank you in advance for your answers!
Best Regards
Dougy

As you are stating, if you set booth properties to the same TemplateBinding your text will be invisible. You have to create another property so you can manage them independently.
Create in your code a dependency property of type Brush and then template binding your TextBlock to that property.

Related

WPF - How to access a control in a GridView templated cell

There are similar topics here, but none of the resolutions have helped me.
I have the following:
<ControlTemplate x:Key="PlateWellControlTemplate"
TargetType="{x:Type ContentControl}">
<Grid x:Name="PART_stateGrid"
Margin="0,0,5,0">
<Ellipse Fill="#FF252526"
MinWidth="34"
MinHeight="34"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Ellipse x:Name="PART_stateControl"
Fill="#FFE6E6E6"
MinWidth="32"
MinHeight="32"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Label FontWeight="Bold"
FontFamily="Verdana"
Foreground="Black"
Background="#00000000"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
Content=""/>
</Grid>
</ControlTemplate>
Used here:
<DataGridTemplateColumn Header="2">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Tag="{Binding WellX2}"
x:Name="wellX2"
MouseDown="well_Click">
<ContentControl Template="{DynamicResource PlateWellControlTemplate}"/>
Then accessed here in code-behind:
DataTemplate cellTemplate = (DataTemplate)cell.Template.FindName("PART_stateControl", cell);
Where "cell" is a non-null DataGridCell using the template. The above line always returns null and I do not understand why. I have also tried as a ControlTemplate and a ContentPresenter.
What I need is a reference to the Ellipse ("PART_StateControl") in the DataGridCell I've been handed as I need to change one of it's properties. But in general, how do I get to named items in the ContentControl Template? This is all triggered by a click event on the parent Grid control referenced in the DataGridTemplateColumn.CellTemplate here named "wellX2". Again, there are a few discussions on here regarding this, but none have helped. I feel like there's something silly missing. This has to be doable.
Thanks in advance for any help you can afford.
Answer found as a combination of this:
Getting a control from a DataGridCell
and this:
How to Get element inside the content control
Brilliant!

Screen does not display full content of string

i'm using the textblock to display the content,but for the long content, it just cut off and not display the content fully while i'm sure that the i filled the content string. Pls show me where my code is wrong. Thanks
Link of the my screen: www.flickr.com/photos/37903269#N05/15332152972/
my xaml code :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!-- <phone:WebBrowser VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="webBrowser1" /> -->
<ListBox Name="Listbox_DetailPage">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Content}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextNormalStyle}"
HorizontalAlignment="Center"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
I executed the code shared and it seems to wrap text as shown in the screen shot below.
The screenshot you shared seems to have vertical cropping of the text as well. For that, we can set the ScrollViewer.VerticalScrollBarVisibility to 'Auto' with proper Height given.
Also, for your additional knowledge or may be future use, here are some stackoverflow questions which explains the text 'NOT WRAPPING' issue for StackPanel
TextBlock TextWrapping not wrapping inside StackPanel
TextBlock TextWrapping not wrapping
actually, i fixed it.Because of the limitation of sing UI: 4096px limit of size. So there is a need to split the long content in the more than one TextBlock or you can create a scrollabe textbock as here

Changing width and height of Image inside a datatemplate

I have an image inside datatemplate. I want to change its height and width depending on certain conditions. How can I achieve that?
The XAML code I have:
<ListBox x:Name="options_stack" HorizontalAlignment="Left" Margin="198,569,0,33" Width="603" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollMode="Auto" Height="123" Style="{StaticResource ListBoxStyle}" ItemContainerStyle="{StaticResource ListBoxItemStyle}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image x:Name="options_image" Source ="{Binding}" Stretch="Fill" Width="123" Height="123" MaxHeight="123" MaxWidth="123" Tapped="apply_accessory"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Option 1
Since you are binding source property I would create a data structure (to use as DataContext) to hold Source, Width and Height properties and then bind them:
<Image x:Name="options_image"
Source ="{Binding Source}"
Width="{Binding Width}" Height="{Binding Height}"
MaxWidth="{Binding Width}" MaxHeight="{Binding Height}"
Stretch="Fill" Tapped="apply_accessory"/>
Option 2
Another option is to create different DataTemplates and a DataTemplateSelector to apply when certain conditions are met.
DataTemplateSelector ref: http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector.aspx
Option 3
If you don't like both above options you have another way of doing it. In my last work (Taskin, if you want to take a look you can see the link in my profile) I needed to show different colors for different ListViewItems. I didn't want to create a new Property in my Task model to hold the color or a TemplateSelector just for this. So I created a simple IValueConverter instead that uses an already existent Priority object property and returns its color. Then I binded it like this:
<Border Background="{Binding Priority, Converter={StaticResource priorityToColorConverter}}"/>
XAML gives you many ways to implement what you want and it is up to you to choose the best and cleanest way to solve the problem you are facing.

I cant place or set background or border of my user control

I've created a simple user control for my xaml project, but as you can see from my image i cant seem to be able to do certain things.
Ignore the red line, its the size of the control for illustrate its size.
It's placement should be middle of the screen:
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
And as you see its background color should be "Azure" with a blueish border of 3.
Why is this?
In the background I have a Canvas:
<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
<Canvas Name="GameCanvas">
<Canvas.RenderTransform>
<CompositeTransform x:Name="CanvasRenderTransform" />
</Canvas.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" Tap="GestureListener_Tap" PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta"/>
</toolkit:GestureService.GestureListener>
</Canvas>
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
</Grid>
As for my third problem, having the events in the canvas causes the Move slider to be interrupted, making me only able to push it a little each time :-/
In case TileMenu is a UserControl you would have to set these properties on the top level container in the UserControl's XAML as this defines the entire visual structure of the control.
You could bind to the appropriate values in the UserControl, however:
<UserControl x:Class="YourNamespace.TileMenu" ...
x:Name="tileMenu">
<Border BorderBrush="{Binding BorderBrush, ElementName=tileMenu}"
BorderThickness="{Binding BorderThickness, ElementName=tileMenu}">
<Grid>
...
</Grid>
</Border>
</UserControl>

How do I add text inside a shape in XAML

I am working on a Metro App using C++ and XAML. I want to create a polygon shape and add text inside it.
At first I thought of defining my own Controltemplate and apply it to Textblock but unfortunately it does not understand TargetType = "TextBlock".
Secondly, I thought of inheriting the Polygon class and see if I can do anything there but that class is sealed.
Any ideas on how to achieve this?
In WPF XAML you could do something simple like this:
<Grid Width="60" Height="100">
<Ellipse Fill="Yellow"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello"/>
</Grid>
To get text in the centre of a yellow ellipse.
I'm guessing something that simple will work on WinRT.
You can use something like this with ContentControl or so many other controls:
<ContentControl Width="200" Height="100" Content="Something">
<ContentControl.Template>
<ControlTemplate>
<Grid>
<Ellipse Fill="Red"/>
<TextBlock Text="{Binding Content,RelativeSource={RelativeSource FindAncestor,AncestorType=ContentControl}}"
TextWrapping="Wrap"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>