lookless control<\/a> but I was just trying to do the bare minimum to get this working as a proof of concept.<\/p>\nSo what I want is UserControl which displays playing card, so let’s call it CardView and it looks like this (excluding the UserControl element for brevity)<\/p>\n
\r\n<Grid>\r\n <Border Background="White" Padding="8" CornerRadius="8">\r\n <Image Source="{Binding CardImage, RelativeSource={RelativeSource AncestorType=UserControl}}"\/>\r\n <Border.Effect>\r\n <DropShadowEffect \/>\r\n <\/Border.Effect>\r\n <\/Border>\r\n<\/Grid>\r\n<\/pre>\nand the code behind looks like this<\/p>\n
\r\npublic partial class CardView : UserControl\r\n{\r\n public static readonly DependencyProperty CardImageProperty = DependencyProperty.Register(\r\n nameof(CardImage), typeof(Uri), typeof(CardView), new PropertyMetadata(default(Uri)));\r\n\r\n public Uri CardImage\r\n {\r\n get => (Uri)GetValue(CardImageProperty);\r\n set => SetValue(CardImageProperty, value);\r\n }\r\n\r\n public CardView()\r\n {\r\n InitializeComponent();\r\n }\r\n}\r\n<\/pre>\nThe key thing here is that we have this code-behind dependency property CardImage, and in the XAML we want to show the image of the card that was set through the dependency property.<\/p>\n
If this was a lookless control we’d have set this binding up like this <\/p>\n
\r\nRelativeSource={RelativeSource TemplatedParent}\r\n<\/pre>\nbut there’s no separation here of style and code, instead everything’s in the UserControl, so we have to use<\/p>\n
\r\nRelativeSource={RelativeSource AncestorType=UserControl}\r\n<\/pre>\nThis will then bind the UserControl Image to the dependency property in code-behind and allow our host Window or UserControl to simply do the following<\/p>\n
\r\n<local:CardView Width="140" Height="200" \r\n CardImage="..\/Resources\/HQ.png"\/>\r\n<\/pre>\nFor this example, the png’s will be stored in a Resources folder with their Build Action set to Resource.<\/p>\n","protected":false},"excerpt":{"rendered":"
On the weekend I was messing around creating a simple WPF card game application and wanted to just quickly knock together a UserControl with a dependency property (actually there were several controls and several dependency properties) which allows the hosting Window or UserControl to change the property. Ofcourse we should probably look at implementing this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-9456","post","type-post","status-publish","format-standard","hentry","category-wpf"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9456"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9456\/revisions"}],"predecessor-version":[{"id":9465,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9456\/revisions\/9465"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}