Expose property in Windows Phone 7 custom ControlTemplate - c#

I'm using Visual Studio 2010 & Expression Blend 4, the target is Windows Phone 7 platform.
What I would like to make is a custom control (specifically a custom PushPin for Map, but could be anything) and expose some of it's properties so I could change them. I'll try to explain better with an example:
<ControlTemplate x:Key="PushpinControlTemplate1" TargetType="Microsoft_Phone_Controls_Maps:Pushpin">
<Border BorderBrush="#FF0012AD" BorderThickness="3" Background="#FF0012AD" Width="32" Height="32" CornerRadius="5">
<TextBlock Text="2" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="32" Margin="0,-4,0,0"/>
</Border>
</ControlTemplate>
This example is from MSDN example.
Now, when I "use" this template on a map, it shows as expected, but with one problem. I would like that the Text property of the TextBlock (in this case... for example it could be ImageSource if I put an image into the PushPin) could be changed in the properties panel of Expression Blend, and in the C# code "behind" the XAML - of course, for each "instance" of this PushPin separately.
As far as I know, it has to do something with Dependency properties (I could be wrong?), but I am yet to find a clear example showing exactly WHAT, WHERE (C# / XAML) and WHY (sorry, I had to emphasize) had to be done.
I grasped most of the Phone 7 "topics" but now I'm a little stuck regarding resources and data bindings, as shown here :)
If someone could provide some sample code or a link to a good tutorial I would be grateful. Thanks!

If you want to simply set a user control property by code, you can use a normal property. If however you want to bind to the property, you must use a dependency property.
Good example here

Related

Let user resize control (textbox, specifically) in Canvas UWP

I have a canvas with a button that the user can press to add a new textbox to the canvas. How can I make it so the user can resize the text box by clicking and dragging on any of the corners of the textbox. Because the textbox is created in the C# code (not XAML), I would prefer code in C# not XAML.
Thanks
EDIT: My question is different than the one referenced because it is in UWP not WPF. These have very different controls. I would appreciate if you could translate the UWP information into UWP C#
You can use Thumb control instead of a textbox. The thumb control provides the functionality for you to write code to customize the drag and drop behavior. A simple code would be:
<Canvas x:Name="test">
<Thumb Width="100" Height="100">
<Thumb.Template>
<ControlTemplate>
<TextBlock HorizontalAlignment="Center" Text="12345"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
A more complex sample could be found from this SO thread from Jay's answer. But please notice you need to customize the logic yourself in order to make it resize like what you need. The reference is just a direction.

ScrollViewer CanContentScroll Property not Found (Windows 8.1 Universal App)

I'm trying to get a ScrollView to logical scroll instead of physically. After reading up online on how to do this, most sources say to set the CanContentScroll property to False. However, when attempting to do this, it seems that ScrollViewer doesn't have this property.
Here is my XAML code:
<ScrollViewer x:Name="TestScroll" CanContentScroll="True" HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" Margin="66,215,1020,10" Grid.Row="1">
<StackPanel x:Name="TestPanel" Orientation="Vertical">
</StackPanel>
</ScrollViewer>
And the error(s) thrown:
Error 1 The member "CanContentScroll" is not recognized or is not accessible.
Error 2 The property 'CanContentScroll' was not found in type 'ScrollViewer'
I am developing for Windows 8.1, creating a universal app. I feel like I'm missing something like a reference or something incredibly simple because everywhere else that I have looked, it just works.
Any help would be appreciated.
Figured it out, using the VerticalSnapPointsType="Mandatory" property for ScrollViewer instead.

Why is TextElement.FontSize an attached property in StackPanel in WPF

I am reading WPF 4 Unleashed and I am obviously new to WPF (and C# & .NET in general)
In the book, found the following snipped of code:
<StackPanel TextElement.FontSize="30" TextElement.FontStyle="Italic"
Orientation="Horizontal" HorizontalAlignment="Center">
<Button MinWidth="75" Margin="10">Help</Button>
<Button MinWidth="75" Margin="10">OK</Button>
</StackPanel>
TextElement.FontSize is an attached property. I don't understand why is it attached property ?
(Though, I do understand the concept of dependency property)
In Attached Properties Overview on MS site, there is another snipped of code.
<DockPanel>
<CheckBox DockPanel.Dock="Top">Hello</CheckBox>
</DockPanel>
In this case, it makes sense as to why DockPanel.Dock is an attached property - DockPanel class contains dependency property DockProperty.
If you're new to C#, I strongly suggest you start by doing some Hello, World! type of stuff in console applications before trying to get into complex WPF GUI stuff.
WPF is a complex framework not really suitable for the unexperienced. You must have a strong background in C# and OOP in general in order to learn MVVM, which is what you must learn in order to use WPF properly.
That said, StackPanel does not have a FontSize property because it's a Panel and not a Control, which is where the FontXXX properties are defined. That's why you can optionally define the TextElement.FontSize Attached Property, which are child controls will inherit due to Dependency Property Value Inheritance in the Visual Tree.
As an aside, that book was in a former coworker's desk, so I grabbed it and rapidly browsed thru it. I didn't find a single mention to MVVM, which at this point I consider a fundamental part of the WPF learning curve.

ComboBox Dropdown Appears Beneath Window

So I was have a combobox like below, coded like this;
AllowsTransparency="True" Background="Transparent">
<Border CornerRadius="10" Background="Beige" BorderBrush="Aqua" BorderThickness="2">
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Label Name="lblText"></Label>
<ComboBox Name="cbxNumbers"></ComboBox>
<TextBox Name="txtNumbers" Visibility="Collapsed"></TextBox>
<Button HorizontalAlignment="Center" Name="btnDone"
Click="btnDone_Click">That's Right!</Button>
</StackPanel>
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="1"
FontSize="8" Name="btnChangeInput" Click="btnChangeInput_Click">Let me chose the number
</Button>
</Grid>
</Border>
And then populated in code like this;
lblText.Content = Text;
cbxNumbers.Items.Add(5);
cbxNumbers.Items.Add(10);
cbxNumbers.Items.Add(50);
cbxNumbers.Items.Add(100);
cbxNumbers.Items.Add(1000);
cbxNumbers.Items.Add(10000);
cbxNumbers.Items.Add(100000);
cbxNumbers.Items.Add(1000000);
cbxNumbers.SelectedIndex = 0;
My question is obviously, why is my Dropdown showing beneath my window?
UPDATE
Quote Microsoft
Thank you for reporting this issue. Though this issue is under
investigation, we will likely not have a fix available in .NET 4.0. We
will update this bug again when we are able to fix the issue in a
future release. Thanks!
Great... any ideas for a work around?
This is a well documented bug with AllowTransparency=TRUE. It only happens on some computers running Win XP.
http://connect.microsoft.com/VisualStudio/feedback/details/465964/wpf-combobox-dropdown-list-appears-behind-the-form-when-allowstransparency-true
A workaround is found here:
As noted before, this is an issue with layered windows on XP. There is
not much that can be done at the WPF level to solve this, and given
that XP is no longer being serviced this isn't very likely to be
fixed. There are potentially workarounds you can employ, though.
The source of the problem is that WPF uses something called "Layered
Windows" when WindowStyle=None and AllowsTransparency=True. Often the
reason for doing this is to implement custom window chrome. Recently
the WPF team published a library that allows you to get custom chrome
without resorting to layered windows. The library is available at
http://code.msdn.microsoft.com/WPFShell
This doesn't support per-pixel opacity, but it does allow for
completely custom rendering of the window, including areas normally
managed by the system. It lets you set the radii of the windows
corners, but not have a completely arbitrary shape. If you can use
this library instead of AllowsTransparency=True then it should solve
this issue.
Microsoft has issued a hotfix, but it seems to not have fixed all problems related to the issue.

Best practices for designing a simple element to be used in many places, WPF

What are the best practices for designing a simple component, for example a border with a background, rounded corners and a textblock with specific styling inside? What I need to be able to do is add this component on many different objects (basically a styled label for the items). The easiest way to design such a thing, in my opinion, is via XAML, but how do I create more of these objects from the code behind?
Another option would of course to just write it all in code, but it is much slower to design the look by just looking at code. I tried googling around a bit but I suppose I am simply not figuring out the correct keywords because I was unable to find anything of use.
I think there are multiple ways of doing this. Depends on what exactly you want to achieve. You would want to read up on the following in WPF
1. UserControls
2. CustomControls
3. Styles
4. Templates
5. Resources
You could use a ContentControl and set its template. Your template would be the border/background/rounded corners etc...
<DataTemplate x:Key="MyTemplate">
<Border>
...
<TextBlock Text="{TemplateBinding Content}" />
...
</Border>
</DataTemplate >
You'd use it like this:
<ContentControl ContentTemplate="{StaticResource MyTemplate}" Content="blah blah" />

Categories

Resources