locked
Problem with custom control library.... (Marko Vuksanovic) - 9/23/2006 12:25 PM PST RRS feed

  • Question

  • By Marko Vuksanovic

    I have tried making my custom control library (for testing purposes) that, 
    for the beginning, includes only ImageButton control. I have made my custom 
    imageButton control as it is described in the tutorial that comes with MS 
    Expresssion Interactive Designer.
    
    Then I have tried including that library into another WPF project, which 
    would use that control. Here I have encountered some problems.
    
    1. The image in the button cannot be replaced. I have solved that by 
    modifying the code that comes in the tutorial.
    
    2. I have included two images in the project (image1.gif and image2.gif). If 
    I try to type the "image1.gif" as source it says it cannot find the file 
    C:\Windows\system32\image1.gif. If I enter the full path it displays the 
    picture normaly. This is not really acceptable as the path to the image is 
    hardcoded and the application will not work properly on other machines when 
    installed. So do you have any suggestions how to solve this issue, (that the 
    pathis not hardcoded)?
    
    3. If I add the control library in the other WPF project I need to 
    copy-paste the controlTemplate to that project's WPF file in order to apply 
    the templete to the image buttons that I put as part of that applications 
    interface. The XAML code of the ControlLibrary XAML file is shown below. What 
    should I do in order to be able to apply the resource to the ImageButton 
    Control (added to the WPF application) without copying the whole 
    CotrolTemplate markup from the controlLibrary itself?
    
    <Grid 
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
    	mc:Ignorable="d"
    	Background="#FFFFFFFF" 
    	x:Name="DocumentRoot"
    	x:Class="MeiRouWPFControlLibrary.Scene1" 
    	Width="640" Height="480" 
    xmlns:MeiRouWPFControlLibrary="clr-namespace:MeiRouWPFControlLibrary">
    
    	<Grid.Resources>
    		<Storyboard x:Key="OnLoaded"/>
    		<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type 
    ButtonBase}">
    			<Grid x:Name="Grid">
    				<Grid.ColumnDefinitions>
    					<ColumnDefinition Width="0.35*"/>
    					<ColumnDefinition Width="0.65*"/>
    				</Grid.ColumnDefinitions>
    				<Grid.RowDefinitions>
    					<RowDefinition/>
    				</Grid.RowDefinitions>
    				<Rectangle Fill="{TemplateBinding Background}" RadiusX="5" RadiusY="5" 
    Margin="0,0,0,0" x:Name="Rectangle" Grid.ColumnSpan="2"/>
    				<ContentPresenter HorizontalAlignment="Center" 
    VerticalAlignment="Center" Margin="0,0,0,0" x:Name="ContentPresenter" 
    Grid.Column="1" Content="{TemplateBinding Content}" 
    ContentTemplate="{TemplateBinding ContentTemplate}"/>
    				<Image Margin="2,2,2,2" x:Name="Image" Source="{TemplateBinding 
    MeiRouWPFControlLibrary:ImageButton.Source}"/>
    			</Grid>
    			<ControlTemplate.Triggers>
    				<Trigger Property="IsKeyboardFocused" Value="True"/>
    				<Trigger Property="ToggleButton.IsChecked" Value="True">
    					<Setter Property="Fill" Value="sc#1, 0.224158421, 0.164947689, 0.84801" 
    TargetName="Rectangle"/>
    					<Setter Property="Opacity" Value="0.51134759474427349" 
    TargetName="Rectangle"/>
    				</Trigger>
    				<Trigger Property="IsEnabled" Value="False">
    					<Setter Property="Foreground" Value="#FFADADAD"/>
    				</Trigger>
    			</ControlTemplate.Triggers>
    		</ControlTemplate>
    	</Grid.Resources>
    
    	<Grid.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    			<BeginStoryboard x:Name="OnLoaded_BeginStoryboard" 
    Storyboard="{DynamicResource OnLoaded}"/>
    		</EventTrigger>
    	</Grid.Triggers>
    	
    	<Grid.ColumnDefinitions>
    		<ColumnDefinition/>
    	</Grid.ColumnDefinitions>
    	<Grid.RowDefinitions>
    		<RowDefinition/>
    	</Grid.RowDefinitions>
    	<MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left" 
    VerticalAlignment="Top" Margin="121,108,0,0" Width="195" Height="52" 
    x:Name="ImageButton" Template="{DynamicResource ImageButtonTemplate}" 
    Content="ImageButton" Source="file:///C:/Users/Marko/Documents/Visual Studio 
    2005/Projects/MeiRouInterface/arrow-up_16.gif"/>
    	<MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left" 
    Margin="121,192,0,236" Width="191" x:Name="ImageButton1" 
    Template="{DynamicResource ImageButtonTemplate}" Content="ImageButton1" 
    Source="file:///C:/Users/Marko/Documents/Visual Studio 
    2005/Projects/MeiRouInterface/delete_16.gif"/>
    </Grid>
    Tuesday, February 19, 2008 5:46 PM

Answers

  • By: Brennon Williams

    Howdy Marko,
    
    Have a look at the following:
    http://x-coders.com/files/6/eid-projects/entry5.aspx
    
    This will show you how to add and use image resources in your application so 
    you dont have to worry about the path scenario.
    
    To add a control template to a project without having to copy and paste it, 
    you should be building your templates in a resource dictionary...
    
    try this small instuction for some pointers:
    http://www.x-coders.com/EID/RD_MAY.zip
    
    
    There is a new version of EID due out soon, the details of which are a 
    closely guarded secret, although it has been mentioned that the support for 
    resource dictionaries will be greatly improved.
    
    
    I hope this helps you in some way.
    
    Cheers
    
    
    
    "Marko Vuksanovic" wrote:
    
    > I have tried making my custom control library (for testing purposes) that, 
    > for the beginning, includes only ImageButton control. I have made my custom 
    > imageButton control as it is described in the tutorial that comes with MS 
    > Expresssion Interactive Designer.
    > 
    > Then I have tried including that library into another WPF project, which 
    > would use that control. Here I have encountered some problems.
    > 
    > 1. The image in the button cannot be replaced. I have solved that by 
    > modifying the code that comes in the tutorial.
    > 
    > 2. I have included two images in the project (image1.gif and image2.gif). If 
    > I try to type the "image1.gif" as source it says it cannot find the file 
    > C:\Windows\system32\image1.gif. If I enter the full path it displays the 
    > picture normaly. This is not really acceptable as the path to the image is 
    > hardcoded and the application will not work properly on other machines when 
    > installed. So do you have any suggestions how to solve this issue, (that the 
    > pathis not hardcoded)?
    > 
    > 3. If I add the control library in the other WPF project I need to 
    > copy-paste the controlTemplate to that project's WPF file in order to apply 
    > the templete to the image buttons that I put as part of that applications 
    > interface. The XAML code of the ControlLibrary XAML file is shown below. What 
    > should I do in order to be able to apply the resource to the ImageButton 
    > Control (added to the WPF application) without copying the whole 
    > CotrolTemplate markup from the controlLibrary itself?
    > 
    > <Grid 
    > 	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    > 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    > 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    > 	xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
    > 	mc:Ignorable="d"
    > 	Background="#FFFFFFFF" 
    > 	x:Name="DocumentRoot"
    > 	x:Class="MeiRouWPFControlLibrary.Scene1" 
    > 	Width="640" Height="480" 
    > xmlns:MeiRouWPFControlLibrary="clr-namespace:MeiRouWPFControlLibrary">
    > 
    > 	<Grid.Resources>
    > 		<Storyboard x:Key="OnLoaded"/>
    > 		<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type 
    > ButtonBase}">
    > 			<Grid x:Name="Grid">
    > 				<Grid.ColumnDefinitions>
    > 					<ColumnDefinition Width="0.35*"/>
    > 					<ColumnDefinition Width="0.65*"/>
    > 				</Grid.ColumnDefinitions>
    > 				<Grid.RowDefinitions>
    > 					<RowDefinition/>
    > 				</Grid.RowDefinitions>
    > 				<Rectangle Fill="{TemplateBinding Background}" RadiusX="5" RadiusY="5" 
    > Margin="0,0,0,0" x:Name="Rectangle" Grid.ColumnSpan="2"/>
    > 				<ContentPresenter HorizontalAlignment="Center" 
    > VerticalAlignment="Center" Margin="0,0,0,0" x:Name="ContentPresenter" 
    > Grid.Column="1" Content="{TemplateBinding Content}" 
    > ContentTemplate="{TemplateBinding ContentTemplate}"/>
    > 				<Image Margin="2,2,2,2" x:Name="Image" Source="{TemplateBinding 
    > MeiRouWPFControlLibrary:ImageButton.Source}"/>
    > 			</Grid>
    > 			<ControlTemplate.Triggers>
    > 				<Trigger Property="IsKeyboardFocused" Value="True"/>
    > 				<Trigger Property="ToggleButton.IsChecked" Value="True">
    > 					<Setter Property="Fill" Value="sc#1, 0.224158421, 0.164947689, 0.84801" 
    > TargetName="Rectangle"/>
    > 					<Setter Property="Opacity" Value="0.51134759474427349" 
    > TargetName="Rectangle"/>
    > 				</Trigger>
    > 				<Trigger Property="IsEnabled" Value="False">
    > 					<Setter Property="Foreground" Value="#FFADADAD"/>
    > 				</Trigger>
    > 			</ControlTemplate.Triggers>
    > 		</ControlTemplate>
    > 	</Grid.Resources>
    > 
    > 	<Grid.Triggers>
    > 		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    > 			<BeginStoryboard x:Name="OnLoaded_BeginStoryboard" 
    > Storyboard="{DynamicResource OnLoaded}"/>
    > 		</EventTrigger>
    > 	</Grid.Triggers>
    > 	
    > 	<Grid.ColumnDefinitions>
    > 		<ColumnDefinition/>
    > 	</Grid.ColumnDefinitions>
    > 	<Grid.RowDefinitions>
    > 		<RowDefinition/>
    > 	</Grid.RowDefinitions>
    > 	<MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left" 
    > VerticalAlignment="Top" Margin="121,108,0,0" Width="195" Height="52" 
    > x:Name="ImageButton" Template="{DynamicResource ImageButtonTemplate}" 
    > Content="ImageButton" Source="file:///C:/Users/Marko/Documents/Visual Studio 
    > 2005/Projects/MeiRouInterface/arrow-up_16.gif"/>
    > 	<MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left" 
    > Margin="121,192,0,236" Width="191" x:Name="ImageButton1" 
    > Template="{DynamicResource ImageButtonTemplate}" Content="ImageButton1" 
    > Source="file:///C:/Users/Marko/Documents/Visual Studio 
    > 2005/Projects/MeiRouInterface/delete_16.gif"/>
    > </Grid>
    Tuesday, February 19, 2008 7:22 PM

All replies

  • By: Brennon Williams

    Howdy Marko,
    
    Have a look at the following:
    http://x-coders.com/files/6/eid-projects/entry5.aspx
    
    This will show you how to add and use image resources in your application so 
    you dont have to worry about the path scenario.
    
    To add a control template to a project without having to copy and paste it, 
    you should be building your templates in a resource dictionary...
    
    try this small instuction for some pointers:
    http://www.x-coders.com/EID/RD_MAY.zip
    
    
    There is a new version of EID due out soon, the details of which are a 
    closely guarded secret, although it has been mentioned that the support for 
    resource dictionaries will be greatly improved.
    
    
    I hope this helps you in some way.
    
    Cheers
    
    
    
    "Marko Vuksanovic" wrote:
    
    > I have tried making my custom control library (for testing purposes) that, 
    > for the beginning, includes only ImageButton control. I have made my custom 
    > imageButton control as it is described in the tutorial that comes with MS 
    > Expresssion Interactive Designer.
    > 
    > Then I have tried including that library into another WPF project, which 
    > would use that control. Here I have encountered some problems.
    > 
    > 1. The image in the button cannot be replaced. I have solved that by 
    > modifying the code that comes in the tutorial.
    > 
    > 2. I have included two images in the project (image1.gif and image2.gif). If 
    > I try to type the "image1.gif" as source it says it cannot find the file 
    > C:\Windows\system32\image1.gif. If I enter the full path it displays the 
    > picture normaly. This is not really acceptable as the path to the image is 
    > hardcoded and the application will not work properly on other machines when 
    > installed. So do you have any suggestions how to solve this issue, (that the 
    > pathis not hardcoded)?
    > 
    > 3. If I add the control library in the other WPF project I need to 
    > copy-paste the controlTemplate to that project's WPF file in order to apply 
    > the templete to the image buttons that I put as part of that applications 
    > interface. The XAML code of the ControlLibrary XAML file is shown below. What 
    > should I do in order to be able to apply the resource to the ImageButton 
    > Control (added to the WPF application) without copying the whole 
    > CotrolTemplate markup from the controlLibrary itself?
    > 
    > <Grid 
    > 	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    > 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    > 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    > 	xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
    > 	mc:Ignorable="d"
    > 	Background="#FFFFFFFF" 
    > 	x:Name="DocumentRoot"
    > 	x:Class="MeiRouWPFControlLibrary.Scene1" 
    > 	Width="640" Height="480" 
    > xmlns:MeiRouWPFControlLibrary="clr-namespace:MeiRouWPFControlLibrary">
    > 
    > 	<Grid.Resources>
    > 		<Storyboard x:Key="OnLoaded"/>
    > 		<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type 
    > ButtonBase}">
    > 			<Grid x:Name="Grid">
    > 				<Grid.ColumnDefinitions>
    > 					<ColumnDefinition Width="0.35*"/>
    > 					<ColumnDefinition Width="0.65*"/>
    > 				</Grid.ColumnDefinitions>
    > 				<Grid.RowDefinitions>
    > 					<RowDefinition/>
    > 				</Grid.RowDefinitions>
    > 				<Rectangle Fill="{TemplateBinding Background}" RadiusX="5" RadiusY="5" 
    > Margin="0,0,0,0" x:Name="Rectangle" Grid.ColumnSpan="2"/>
    > 				<ContentPresenter HorizontalAlignment="Center" 
    > VerticalAlignment="Center" Margin="0,0,0,0" x:Name="ContentPresenter" 
    > Grid.Column="1" Content="{TemplateBinding Content}" 
    > ContentTemplate="{TemplateBinding ContentTemplate}"/>
    > 				<Image Margin="2,2,2,2" x:Name="Image" Source="{TemplateBinding 
    > MeiRouWPFControlLibrary:ImageButton.Source}"/>
    > 			</Grid>
    > 			<ControlTemplate.Triggers>
    > 				<Trigger Property="IsKeyboardFocused" Value="True"/>
    > 				<Trigger Property="ToggleButton.IsChecked" Value="True">
    > 					<Setter Property="Fill" Value="sc#1, 0.224158421, 0.164947689, 0.84801" 
    > TargetName="Rectangle"/>
    > 					<Setter Property="Opacity" Value="0.51134759474427349" 
    > TargetName="Rectangle"/>
    > 				</Trigger>
    > 				<Trigger Property="IsEnabled" Value="False">
    > 					<Setter Property="Foreground" Value="#FFADADAD"/>
    > 				</Trigger>
    > 			</ControlTemplate.Triggers>
    > 		</ControlTemplate>
    > 	</Grid.Resources>
    > 
    > 	<Grid.Triggers>
    > 		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    > 			<BeginStoryboard x:Name="OnLoaded_BeginStoryboard" 
    > Storyboard="{DynamicResource OnLoaded}"/>
    > 		</EventTrigger>
    > 	</Grid.Triggers>
    > 	
    > 	<Grid.ColumnDefinitions>
    > 		<ColumnDefinition/>
    > 	</Grid.ColumnDefinitions>
    > 	<Grid.RowDefinitions>
    > 		<RowDefinition/>
    > 	</Grid.RowDefinitions>
    > 	<MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left" 
    > VerticalAlignment="Top" Margin="121,108,0,0" Width="195" Height="52" 
    > x:Name="ImageButton" Template="{DynamicResource ImageButtonTemplate}" 
    > Content="ImageButton" Source="file:///C:/Users/Marko/Documents/Visual Studio 
    > 2005/Projects/MeiRouInterface/arrow-up_16.gif"/>
    > 	<MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left" 
    > Margin="121,192,0,236" Width="191" x:Name="ImageButton1" 
    > Template="{DynamicResource ImageButtonTemplate}" Content="ImageButton1" 
    > Source="file:///C:/Users/Marko/Documents/Visual Studio 
    > 2005/Projects/MeiRouInterface/delete_16.gif"/>
    > </Grid>
    Tuesday, February 19, 2008 7:22 PM
  • By: Unni Ravindranathan (MS)

    Hi Marko,

    The issue where you cannot set Image source even if the image has been
    correctly included in your project is a bug in Expression Interactive
    Designer that we have since fixed.

    Regarding your other question, you have a good observation. You should not
    have to copy a template for a control that can be used across applications.
    WPF has an elegant solution for this problem that even lets you specify
    different templates for differnt OS themes (Luna for XP, Aero for Vista,
    Classic, etc.) in addition to specifying a generic template that will be
    used when theme specific templates are not specified. However, this is not a
    scenario that we support in our tool - you can always create the structure
    required for this using the following sample as a guideline and then use
    Expression Interactive Designer to create the markup.

    http://windowssdk.msdn.microsoft.com/en-us/library/ms771620.aspx

    Thanks,
    -Unni

    "Marko Vuksanovic" <MarkoVuksanovic@discussions.microsoft.com> wrote in
    message news:3F00F831-9994-426D-BECC-C209B7DC0B5F@microsoft.com...
    >I have tried making my custom control library (for testing purposes) that,
    > for the beginning, includes only ImageButton control. I have made my
    > custom
    > imageButton control as it is described in the tutorial that comes with MS
    > Expresssion Interactive Designer.
    >
    > Then I have tried including that library into another WPF project, which
    > would use that control. Here I have encountered some problems.
    >
    > 1. The image in the button cannot be replaced. I have solved that by
    > modifying the code that comes in the tutorial.
    >
    > 2. I have included two images in the project (image1.gif and image2.gif).
    > If
    > I try to type the "image1.gif" as source it says it cannot find the file
    > C:\Windows\system32\image1.gif. If I enter the full path it displays the
    > picture normaly. This is not really acceptable as the path to the image is
    > hardcoded and the application will not work properly on other machines
    > when
    > installed. So do you have any suggestions how to solve this issue, (that
    > the
    > pathis not hardcoded)?
    >
    > 3. If I add the control library in the other WPF project I need to
    > copy-paste the controlTemplate to that project's WPF file in order to
    > apply
    > the templete to the image buttons that I put as part of that applications
    > interface. The XAML code of the ControlLibrary XAML file is shown below.
    > What
    > should I do in order to be able to apply the resource to the ImageButton
    > Control (added to the WPF application) without copying the whole
    > CotrolTemplate markup from the controlLibrary itself?
    >
    > <Grid
    > xmlns="
    http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    > xmlns:x="
    http://schemas.microsoft.com/winfx/2006/xaml"
    > xmlns:mc="
    http://schemas.openxmlformats.org/markup-compatibility/2006"
    > xmlns:d="
    http://schemas.microsoft.com/expression/interactivedesigner/2006"
    > mc:Ignorable="d"
    > Background="#FFFFFFFF"
    > x:Name="DocumentRoot"
    > x:Class="MeiRouWPFControlLibrary.Scene1"
    > Width="640" Height="480"
    > xmlns:MeiRouWPFControlLibrary="clr-namespace:MeiRouWPFControlLibrary">
    >
    > <Grid.Resources>
    > <Storyboard x:Key="OnLoaded"/>
    > <ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type
    > ButtonBase}">
    > <Grid x:Name="Grid">
    > <Grid.ColumnDefinitions>
    > <ColumnDefinition Width="0.35*"/>
    > <ColumnDefinition Width="0.65*"/>
    > </Grid.ColumnDefinitions>
    > <Grid.RowDefinitions>
    > <RowDefinition/>
    > </Grid.RowDefinitions>
    > <Rectangle Fill="{TemplateBinding Background}" RadiusX="5" RadiusY="5"
    > Margin="0,0,0,0" x:Name="Rectangle" Grid.ColumnSpan="2"/>
    > <ContentPresenter HorizontalAlignment="Center"
    > VerticalAlignment="Center" Margin="0,0,0,0" x:Name="ContentPresenter"
    > Grid.Column="1" Content="{TemplateBinding Content}"
    > ContentTemplate="{TemplateBinding ContentTemplate}"/>
    > <Image Margin="2,2,2,2" x:Name="Image" Source="{TemplateBinding
    > MeiRouWPFControlLibrary:ImageButton.Source}"/>
    > </Grid>
    > <ControlTemplate.Triggers>
    > <Trigger Property="IsKeyboardFocused" Value="True"/>
    > <Trigger Property="ToggleButton.IsChecked" Value="True">
    > <Setter Property="Fill" Value="sc#1, 0.224158421, 0.164947689, 0.84801"
    > TargetName="Rectangle"/>
    > <Setter Property="Opacity" Value="0.51134759474427349"
    > TargetName="Rectangle"/>
    > </Trigger>
    > <Trigger Property="IsEnabled" Value="False">
    > <Setter Property="Foreground" Value="#FFADADAD"/>
    > </Trigger>
    > </ControlTemplate.Triggers>
    > </ControlTemplate>
    > </Grid.Resources>
    >
    > <Grid.Triggers>
    > <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    > <BeginStoryboard x:Name="OnLoaded_BeginStoryboard"
    > Storyboard="{DynamicResource OnLoaded}"/>
    > </EventTrigger>
    > </Grid.Triggers>
    >
    > <Grid.ColumnDefinitions>
    > <ColumnDefinition/>
    > </Grid.ColumnDefinitions>
    > <Grid.RowDefinitions>
    > <RowDefinition/>
    > </Grid.RowDefinitions>
    > <MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left"
    > VerticalAlignment="Top" Margin="121,108,0,0" Width="195" Height="52"
    > x:Name="ImageButton" Template="{DynamicResource ImageButtonTemplate}"
    > Content="ImageButton" Source="file:///C:/Users/Marko/Documents/Visual
    > Studio
    > 2005/Projects/MeiRouInterface/arrow-up_16.gif"/>
    > <MeiRouWPFControlLibrary:ImageButton HorizontalAlignment="Left"
    > Margin="121,192,0,236" Width="191" x:Name="ImageButton1"
    > Template="{DynamicResource ImageButtonTemplate}" Content="ImageButton1"
    > Source="file:///C:/Users/Marko/Documents/Visual Studio
    > 2005/Projects/MeiRouInterface/delete_16.gif"/>
    > </Grid>
    Tuesday, February 19, 2008 7:23 PM