Hi
I need to display an image located on the local drive within a datacard.
Here is my existing xaml
<
igDP:XamDataPresenter Name="myDataPresenter" Grid.Row="1" BindToSampleData="True" AutoFit="True">
<igDP:XamDataPresenter.FieldSettings>
<igDP:FieldSettings AllowRecordFiltering="True" FilterClearButtonVisibility="Visible" FilterOperandUIType="Combo" FilterOperatorDefaultValue="Contains" FilterStringComparisonType="CaseInsensitive" AllowEdit="False" AllowGroupBy="False" />
</igDP:XamDataPresenter.FieldSettings>
<igDP:XamDataPresenter.FieldLayoutSettings>
<igDP:FieldLayoutSettings AutoGenerateFields="False"/>
</igDP:XamDataPresenter.FieldLayoutSettings>
<igDP:XamDataPresenter.FieldLayouts>
<igDP:FieldLayout Key="myLayout">
<igDP:FieldLayout.Fields>
<igDP:Field Name="ExerciseTitle" Label="ExerciseTitle" Height="Auto" Width="240"/>
<igDP:Field Name="ExerciseText" Label="ExerciseText" Height="200" Width="240"/>
<igDP:Field Name="Difficulty" Label="Difficulty" Height="Auto" Width="240"/>
<igDP:Field Name="Tags" Label="Tags" Height="Auto" Width="240"/>
<igDP:Field Name="ExerciseID" Label="ExerciseID" Height="0" Width="0"/>
</igDP:FieldLayout.Fields>
</igDP:FieldLayout>
</igDP:XamDataPresenter.FieldLayouts>
<igDP:XamDataPresenter.View>
<igDP:CardView>
<igDP:CardView.ViewSettings>
<igDP:CardViewSettings AutoFitCards="HorizontallyAndVertically" HeaderPath="ExerciseID" ShouldCollapseEmptyCells="True" />
</igDP:CardView.ViewSettings>
</igDP:CardView>
</igDP:XamDataPresenter.View>
</igDP:XamDataPresenter>
Hello,
Thank you for your post. I have been looking into it and I can suggest you see the sample from the Feature Browser under xamDataCards / Style / Custom Card Layout section, where it is show how to display image in the Control. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.
Hi Stefan,
my experience with xaml with quite limited so i am trying to learn by example.
Can you give me a vb.net example which would display an image located on the located drive?
thankyou for your help,
Paul
Hello Paul,
I have created a sample project for you with the functionality you want. It’s in C#, but in code behind I just defined the data source, so the important part is in XAML. Also I can say that the best practice for retemplating a visual element is by using XAML, not code behind.
Hope this helps you.
I have an sql datatable populated with data which is currently displayed in the datacards. One of the columns in the table contains the filepath to the images. How do i bind this column to the path in xaml? I have set the Path parameter to equal the name of the column in the datatable.
my xaml looks like this.
<igDP:XamDataPresenter Name="myDataPresenter" Grid.Row="1" BindToSampleData="False" AutoFit="True" Margin="0,0,0,6" Visibility="Visible" Theme="Office2k7Blue"> <igDP:XamDataPresenter.FieldSettings> <igDP:FieldSettings AllowRecordFiltering="True" FilterClearButtonVisibility="Visible" FilterOperandUIType="Combo" FilterOperatorDefaultValue="Contains" FilterStringComparisonType="CaseInsensitive" AllowEdit="False" AllowGroupBy="False" AllowCellVirtualization="True" AllowLabelVirtualization="True" AllowResize="False" AllowSummaries="False" CellClickAction="SelectCell" /> </igDP:XamDataPresenter.FieldSettings> <igDP:XamDataPresenter.FieldLayoutSettings> <igDP:FieldLayoutSettings AutoGenerateFields="False" AllowAddNew="False" AllowDelete="False" HighlightAlternateRecords="True" HighlightPrimaryField="Highlight" /> </igDP:XamDataPresenter.FieldLayoutSettings>
<igDP:XamDataPresenter.FieldLayouts> <igDP:FieldLayout Key="myLayout"> <igDP:FieldLayout.Fields> <igDP:Field Name="ExerciseTitle" Label="ExerciseTitle" Height="Auto" Width="100"/> <igDP:Field Name="ExerciseText" Label="ExerciseText" Height="90" Width="240"/> <igDP:Field Name="BodyParts" Label="BodyParts" Height="Auto" Width="100"/> <igDP:Field Name="ExerciseFunctions" Label="ExerciseFunctions" Height="Auto" Width="100"/> <igDP:Field Name="ExerciseID" Label="ExerciseID" Visibility="Hidden" /> <igDP:Field Name="PicturePath" Label="PicturePath" Height="Auto" Width="Auto"> <igDP:Field.Settings> <igDP:FieldSettings> <igDP:FieldSettings.CellValuePresenterStyle> <Style TargetType="{x:Type igDP:CellValuePresenter}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Image Source="{Binding RelativeSource={RelativeSource AncestorType={x:Type igDP:CellValuePresenter}},Path=PicturePath}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </igDP:FieldSettings.CellValuePresenterStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> </igDP:FieldLayout.Fields> </igDP:FieldLayout> </igDP:XamDataPresenter.FieldLayouts> <igDP:XamDataPresenter.View> <igDP:CardView /> </igDP:XamDataPresenter.View> </igDP:XamDataPresenter>
You should change the Path in the Binding of the Image's Source to Value, instead of PicturePath.
Excellent - thanks for your help.
Thank you for your feedback. I am glad that you resolved your issue and I believe that other community members may benefit from this as well.
Thanks again.