Kezdőlap > .NET, C#, Office > Task Pane készítése

Task Pane készítése

2012. február 7. kedd Hozzászólás Go to comments

Feladat ismertetése

A következő feladatban egy saját Office-os Task Pane-t fogunk elkészíteni, amely a Bing képkeresőjét használva az adott témakör képeit jeleníti meg, majd a képet kiválasztva beszúrjuk a Word dokumentumunkba.

Mivel ez egy hosszabb feladat, így több a hibalehetőség is. Ha elakadunk a feladatnál, nézzük meg a feladathoz mellékelt tutorial videót!

Feladat képekben

image

image

Bing regisztráció

Mielőtt elkezdenénk megírni a kódot, a Bing Developer centeren regisztrálnunk kell. Ez a regisztráció azért szükséges, hogy használni tudjuk a Bing kereső API-ját. Látogassunk el a http://www.bing.com/developers/ oldalra, és kattintsunk a Sign in gombra, majd a Live ID–nk segítségével jelentkezzünk be a Bing Developers oldalára!

image

Miután beléptünk az oldalra kattintsunk a Create an AppID linkre, itt készíthetjük el az alkalmazásunkhoz tartozó AppId-ját.

image

A megjelenő ablakban meg kell adnunk az alkalmazásunk nevét, leírását, és egyéb cég/személyinformációkat. Ha megadtuk, akkor fogadjuk el a szerződési feltételeket, és kattintsunk az Agree gombra!

image

Ezt követően legenerálódik az App ID-nk, aminek a segítségével hozzáférhetünk majd a Bing keresési szolgáltatásához.

image

A bing developer oldalán ennyit kellet elkészíteni, most írjuk meg az Add-inunkat!

TaskPane elkészítése

Indítsuk el a Visual Studio 2010 Ultimate változatát: kattintsunk a File -> New -> Project… menüpontra, majd a megjelenő ablakban állítsuk be az alábbi ábrán látható tulajdonságokat!

A jobb oldali menüből válasszuk ki a Visual C# elemet, azon belül is az Office -> 2010 elemet, majd a template listából válasszuk ki a Word 2010 Add-in-t! Adjuk neki az WordBingSearchDemo projekt nevet, majd kattintsunk az OK gombra (Figyeljünk arra, hogy a .NET Framework 4 legyen kiválasztva!)!

image

Betöltődik a már korábban is megismert add-in template. Először adjuk hozzá a Bing keresési szolgáltatást!

imageKattintsunk jobb egérgombbal Solution Explorerben a References-re, majd a megjelenő helyi menüben válasszuk ki az Add Service Reference… menüpontot!

A megjelenő ablakban adjuk meg az Address-hez a következő URL címet: http://api.search.live.net/search.wsdl, majd kattintsunk a Go gombra, ekkor megtalálja a Bing keresési szolgáltatást és annak leírását. Ezt követően a Namspacet írjuk át BingService-re, majd kattintsunk az Advanced… gombra!

image

A megjelenő ablakban pipáljuk be a Client szekció alatt a Generate asynchronous operations –t,ekkor a metódusokból az aszinkron módját is le fogja generálni a számunkra. Kattintsunk az OK gombra, majd az Add Service Reference ablakban megint kattintsunk az OK gombra!

image

imageEkkor a Solution Explorerben lesz egy BingService nevű szolgáltatás referencia. Erre tudunk majd hivatkozni a kódunkból.

 

 

A szolgáltatás referenciát hozzáadtuk, itt az ideje elkészíteni a Task Pane-t. Az Officeban eleve rengeteg Task Pane van, az egyik talán leggyakrabban használatos Task Pane aimage keresés / navigáció pane. A task pane-k meghatározott módon jelennek meg az adott alkalmazás oldalán. Általában jobb vagy bal oldalán rögzítve (de ez nem feltétele).

Érdekesség, hogy kizárólagosan csak Windows Forms user controll helyezhető el a Task Panen belül. Felmerülhet a kérdés, hogy WPF (Windows Presentation Foundation) kontrollt el lehet-e helyezni a Task Panen, hisz a WPF-el mégiscsak rugalmasabb és szebb felhasználói felület alakítható ki. Természetesen el lehet helyezni, de ilyenkor a Windows Forms-os User Controlba egy ElementHost kontrollt kell elhelyezni, ami már tudja hosztolni a WPF kontrollunkat is.

Mielőtt hosztolnánk a kontrollt, készítsük el a WPF-es Bing Search kontrolunkat! A Projekten kattintsunk jobb egérgombbal, és az Add –> New Item… -et kiválasztva adjunkk hozzá egy User Control (WPF) –t, amelynek a neve legyen a BingSeachControl.xaml, majd kattintsunk az Add gomb-ra!

image

Alakítsuk ki a felhasználó felületet ennek a kontrollnak!

Állítsuk be, hogy a User Controlnak a szélességre legyen 300 pixel.

Width="300"

A Gridbe írjuk a következő sor definíciókat:

<Grid.RowDefinitions>

    <RowDefinition Height="50" />

    <RowDefinition Height="*" />

</Grid.RowDefinitions>

Az első sor 50 pixel magas lesz, ide fog kerülni egy keresés textbox, és egy keresés (Bing It) gomb a második sorba pedig egy Listbox fog kerülni, ami az eredmények listáját fogja megjeleníteni.

A sordefiníció alá adjuk hozzá az alábbi két kontrollt, az első egy Textbox, melynek neve a txtSearch, és a Grid első sorához tartozik. A második kontrol egy gomb, amelynek neve a btnBing, és szintén az első sorhoz tartozik. A gomb Contentje pedig a „Bing It!” szöveg lesz.

<TextBox Grid.Row="0"  Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="txtSearch" VerticalAlignment="Top" Width="193" />

<Button Grid.Row="0" Content="Bing It!" Height="23" HorizontalAlignment="Left" Margin="213,12,0,0" Name="btnBing" VerticalAlignment="Top" Width="75" />

A gomb alá adjunk hozzá egy Listboxot, melynek neve az lstResult, ez a Listbox a Grid második sorához (1-es index) fog tartozni, amely kitölti a teljes rendelkezésre álló területet. Határozzuk továbbá meg a listbox számára, hogy a HorizontalScroll-bart ki van kapcsolva (Ez majd később az adatok megjelenítésénél lesz hasznos).

<ListBox Grid.Row="1" Name="lstResult"  ScrollViewer.HorizontalScrollBarVisibility="Disabled">

 

</ListBox>

A listbox egy egyszerű lista kontroll, amelyet a Windows Forms felhasználók úgy ismernek, hogy szöveges elemeket tartalmaz, WPF alatt viszont egy listbox bármit tartalmazhat, és szinte bármilyen elrendezésben. Mivel a mi eredményeink most képek lesznek, ezért szeretnénk megjeleníteni egy Listboxba őket, így egy saját elrendezés- és elemsablont fogunk definiálni a számára.

A következő XAML kódot írjuk a <ListBox> és </ListBox> közé:

<ListBox.ItemTemplate>

    <DataTemplate>

        <Image Height="64" Width="64" Stretch="UniformToFill" Source="{Binding MediaUrl}" />

    </DataTemplate>

</ListBox.ItemTemplate>

 

<ListBox.ItemsPanel>

    <ItemsPanelTemplate>

        <WrapPanel />

    </ItemsPanelTemplate>

</ListBox.ItemsPanel>

(A template-eket célszerű erőforrásokban elhelyezni, az újrafelhasználás miatt. Most csak a feladat gyorsabb tempója miatt helyeztük el a Listboxnál sablonokat.)

Az első egy ItemTemplate, azaz megmondjuk, hogy egy elem, ami a listboxba kerül, az hogy fog kinézni. Ez most egy 64×64-es kép lesz, amit beillesztünk ebbe a méretbe (ha szükséges, akkor a széléből levágunk egy keveset – UniformToFill), és a Source tulajdonságának a MediaUrl-t fogunk adatkötve átadni (Erről a tulajdonságról később ejtünk szót).

Az ItemTemplate alatt található egy ItemsPanelTemplate is, amely az elrendezést fogja befolyásolni. Ebbe egyszerűen csak egy WrapPanelt rakunk, aminek az eredménye az lesz, hogy ha egy elem az adott sorba már nem fér ki, akkor átugrik a következő sorba.

Ezt követően készítsük el az eseményeket! A BingSearch kontrollunkon két esemény lesz: az egyik, amikor rákattintunk a keresés gombra, a másik, amikor kiválasztunk egy elemet a listboxban.

image

Kattintsunk kétszer a gombra (btnBing) ekkor betöltődik a gomb alapértelmezett eseményvezérlője.

private void btnBing_Click(object sender, RoutedEventArgs e)

{

}

A listboxnál pedig a SelectionChanged eseményt kell betöltenünk. Mivel a listbox a tervező nézetben alig látszik, ezért célszerűbb XAML kódból behívni az eseményvezérlőt. Térjünk vissza a Listbox XAML definíciójához és iratkozzunk fel a SelectionChanged eseményre!

<ListBox Grid.Row="1" Name="lstResult"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="lstResult_SelectionChanged">

imageJobb klikk az lstResult_SelectionChanged–re, majd a helyi menüből válasszuk ki a Navigate To EventHandler menüpontot, ekkor a kódnézetben találjuk magunkat, ahol megírhatjuk, hogy mi történjen a Selection Changed bekövetkezése esetén.

private void lstResult_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

}

A következő rész opcionális, de ajánlott mindazoknak, aki szép listboxot szeretnének látni, nem csak egy puritán képekkel teletűzdelt felületet.

A Grid elé hozzunk létre egy UserControl resources-t, és abban definiáljunk egy stílust, amely megmondja, hogy hogy fog kinézni a listbox, és milyen lesz a viselkedése.

<UserControl.Resources>

    <Style TargetType="ListBoxItem">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ListBoxItem">

                    <Border x:Name="ItemBorder" BorderBrush="Black" Background="LightGray" BorderThickness="4" CornerRadius="5" Margin="5">

                        <ContentPresenter Margin="2" />

                        <Border.Effect>

                            <DropShadowEffect/>

                        </Border.Effect>

                    </Border>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsSelected" Value="True">

           <Setter TargetName="ItemBorder" Property="BorderBrush" Value="Red" />

                        </Trigger>

                        <Trigger Property="IsMouseOver" Value="True">

           <Setter TargetName="ItemBorder" Property="BorderBrush" Value="Blue" />

                        </Trigger>

                        <MultiTrigger>

                            <MultiTrigger.Conditions>

                                <Condition Property="IsMouseOver" Value="False" />

                                <Condition Property="IsSelected" Value="False" />

                            </MultiTrigger.Conditions>

           <Setter TargetName="ItemBorder" Property="Opacity"  Value="0.80" />

                        </MultiTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</UserControl.Resources>

A fentebbi stílus definíció nem tartozik szorosan a feladat megoldásához, így ez nem kerül magyarázatra.

A teljes BingSearchControl.xaml kódja így fog kinézni (A listbox stílusa nélkül!):

UserControl x:Class="WordBingSearchDemo.BingSearchControl"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;

             mc:Ignorable="d" Width="300">

    <UserControl.Resources>

 

    </UserControl.Resources>

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <TextBox Grid.Row="0"  Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="txtSearch" VerticalAlignment="Top" Width="193" />

        <Button Grid.Row="0" Content="Bing It!" Height="23" HorizontalAlignment="Left" Margin="213,12,0,0" Name="btnBing" VerticalAlignment="Top" Width="75" Click="btnBing_Click" />

        <ListBox Grid.Row="1" Name="lstResult"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="lstResult_SelectionChanged">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Image Height="64" Width="64" Stretch="UniformToFill" Source="{Binding MediaUrl}" />

                </DataTemplate>

            </ListBox.ItemTemplate>

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <WrapPanel />

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

        </ListBox>

    </Grid>

</UserControl>

A felhasználói felületünk meg is van, itt az ideje megírni a keresés üzleti logikáját. Nyissuk meg a BingSearchControl.xaml.cs fájlt!

A usingok közé vegyük fel a BingService névteret annak érdekében, hogy könnyebben tudjunk hivatkozni rá.

using WordBingSearchDemo.BingService;

A konstruktor előtt definiáljunk egy BingPortTypeClient-et (ezzel fogjuk meghívni a szolgáltatást), és egy SearchRequest objektumot (vele fogjuk reprezentálni a keresést).

BingPortTypeClient bingClient;

SearchRequest sRequest;

A konstruktorban példányosítsuk a BingPortTypeClient-et, és a SearchRequest objektumot, majd a SearchRequestnek állítsuk be az AppId tulajdonságot (itt azt a kulcsot kell megadni, amit a Bing Developers oldalon kreált a számunkra a rendszer), ezt követően pedig állítsuk még be a SearchRequestnél, hogy csak és kizárólag képeket keressen a számunkra!

A konstruktor tehát így fog kinézni:

public BingSearchControl()

{

    InitializeComponent();

    bingClient = new BingPortTypeClient();

    sRequest = new SearchRequest();

    sRequest.AppId = "A6233E8DAB28415E…………";

    sRequest.Sources = new SourceType[] { SourceType.Image };

}

Ezek után töltsük ki a btnBing_Click esemény vezérlőjét az alábbi módon:

ImageRequest imgRequest = new ImageRequest();

imgRequest.Filters = new String[] { "Size:Small" };

imgRequest.Count = 50;

imgRequest.CountSpecified = true;

sRequest.Image = imgRequest;

sRequest.Query = txtSearch.Text;

 

SearchResponse response = bingClient.Search(sRequest);

 

lstResult.ItemsSource = response.Image.Results;

Készítünk egy ImageRequest példányt, amely Filter tulajdonságánál egy string tömböt adunk át a számára. Ebben a tömbben lehet megmondani, hogy milyen méretű képeket keressünk (Értelemszerűen lehet többet is). Mi most csak a kisméretű képekre vagyunk kíváncsiak. A Count tulajdonságánál megmondjuk, hogy a találati lista hány elemet tartalmazzon. Ahhoz, hogy a Count működjön, az imageRequest CountSpecified tulajdonságát true -ra kell állítani.

Ezt követően az sRequest (SearchRequest) Image tulajdonságához átadjuk az ImageRequest példányt, és a sRequest (Search Request) Query tulajdonságánál pedig a txtSearchbe átadott szöveget adjuk át.

Most jön a keresés, méghozzá egy sima szinkron keresés (Azaz amíg nem érkezik meg a válasz addig blokkolódik a UI) .

A keresési eredmény egy SearchResponse objektum lesz, és ezen objektum Image.Result tulajdonságát (ami egy ImageResult tömb) adjuk át az lstResult ItemSource –a számára.

Önálló feladatként elvégezhető az aszinkron kérés. A feladat egyszerűsége érdekében most csak a szinkron módszert nézzük meg.

A keresést elkészítettük, de a Word Dokumentumhoz való kép beillesztést még nem ugyanis ezt a későbbiek folyamán fogjuk megtenni. Egyelőre próbáljuk ki az adott bővítményt! Ehhez a következő műveleteket el kell még végezni:

Ahhoz, hogy használjuk a WPF usercontrolunkat, hozzá kell adnunk 2 névteret a projektünkhöz.

imageKattintsunk jobb egérgombbal a Solution Explorerben található Refrences-re, és a megjelenő helyi menüben pedig válasszuk, ki az Add Reference… menüpontot! A megjelenő ablakban válasszuk a .NET fület, és keressük ki a System.Xaml és a WindowsFormsIntegration assemblyt. Majd kattintsunk az OK gombra.

Ezt követően nyissuk meg a ThisAddIn.cs fájlt, és a using -ok közé vegyük fel a System.Windows.Forms és a System.Windows.Forms.Integration névtereket.

using System.Windows.Forms;

using System.Windows.Forms.Integration;

Most töltsük ki a ThisAddIn_StartUp eseményét az alábbi módon:

UserControl taskPane = new UserControl();

BingSearchControl bingControl = new BingSearchControl();

//Itt később egy eseményre fogunk hivatkozni

taskPane.Controls.Add(

    new ElementHost {

        Child = bingControl,

        Dock = DockStyle.Fill }

        );

 

Microsoft.Office.Tools.CustomTaskPane myTaskPane = CustomTaskPanes.Add(taskPane, "Bing Search");

myTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight;

myTaskPane.Visible = true;

myTaskPane.Width = 307;  

Létrehozunk egy Windows Forms-os User Control-t, majd példányosítjuk a BingSeach kontrolunkat, ezt követően a Windows Forms-os UserControl (taskPane) Control gyűjteményéhez hozzáadunk egy ElementHostot, amely Child tulajdonságához a BingSearch kontrolunk példányát adjuk meg, tehát egy Windows Form-os kontrollba ágyaztunk egy ElementHost-ot, ami önmagában tud WPF kontrollt hosztolni, és ennek a kontrollnak a Child tulajdonságához adtuk át a korábban példányosított WPF kontrollt (BingSearch).

Ha ezzel megvagyunk, akkor készítsünk egy saját TaskPane-t! A CustomeTaskPanes.Add metódusához adjuk át a korábban létrehozott Windows Forms-os usercontrolt (taskPane a neve), és adjunk neki egy fejléc feliratot, ami most a „Bing Search” lesz. Ezt követően beállítjuk, hogy az adott task pane hova dokkolódjon (jobbra), illetve hogy látható legyen, és a Width tulajdonsága pedig 307 pixelre állítjuk.

Ha most elindítjuk az Add-in-t (F5), akkor betöltődik a Word, és ha nincs egyéb hiba, akkor a Word jobb oldalán megjelenik a Bing Search Task Pane-ünk. Írjunk bele egy keresendő szöveget, pl: „Microsoft Office logo”, és kattintsunk a Bing It gombra (Az alkalmazásunk addig megfagy, amíg az eredményeket vissza nem kaptuk, mivel szinkron módon kérdeztük le az eredménylistát)!

Valami hasonlót kell látnunk:

image

Próbáljunk rákattintani az egyik képre! Látható, hogy hiába kattintunk, nincs hatása hisz még nem is irtunk olyan kódot, ami az adott képet betöltené.

Zárjuk be a Wordot, és térjünk vissza a Visual Studio-hoz, majd nyissuk meg a BingSearchControl.Xaml.cs fájlt és a konstruktor elé írjuk a következő két sorokat:

public delegate void SelectedPictureEventHandler(object sender, PictureEventArgs e);

public event SelectedPictureEventHandler SelectedPicture;

Itt létrehozunk egy delegate–et, és egy eseményt. Látható, hogy a PictureEventArgs egy saját esemény-argumentum, ezért ezt nekünk még külön definiálnunk kell.

Adjunk a projektünkhöz egy új osztályt: a Solution Explorerben kattintsunk jobb egérgombbal, majd az Add -> Class … elemet kiválasztva adjunk hozzá egy új osztályt!

image

Ez az osztály az EventArgs osztályból származzon, és adjunk neki egy ImageUrl tulajdonságot is! A teljes osztály tehát a következőképpen fog kinézni:

public class PictureEventArgs : EventArgs

{

    public string ImageUrl { get; set; }

}

Térjünk vissza a BingSearchControl.xaml.cs fájlhoz, és az lstResult_SelectionChanged törzsébe írjuk a következő kódsorokat:

ImageResult selected = lstResult.SelectedItem as ImageResult;

           

if (selected != null && SelectedPicture != null)

{

    SelectedPicture(this, new PictureEventArgs() { ImageUrl = selected.MediaUrl });

}

Itt lekérdezzük, hogy melyik képre kattintott a felhasználó, majd meghívjuk a SelectedPictuire eseményt, és átadunk számára egy új PictureEventArgs –ot, melynek az ImageUrl tulajdonsága a kiválasztott elem MediaUrl-jével lesz egyenlő (A MediaUrl az a tulajdonság, ami a kép URL címét mondja meg) .

A kontrollunk eseménye elkészült, de még a bővítményből nem hivatkozunk rá. Nyissuk meg a ThisAddIn.cs fájlt, és iratkozzunk fel a kontrollunk SelectedPicture eseményére (Ezt közvetlenül a példányosítás után tegyük meg)!

bingControl.SelectedPicture +=new BingSearchControl.SelectedPictureEventHandler(bingControl_SelectedPicture);

(Ha += beírása után 2x megnyomjuk a Tabot, akkor legenerálja az esemény törzséte.Egyébként nekünk kellene megírni)

void bingControl_SelectedPicture(object sender, PictureEventArgs e)

{

    Globals.ThisAddIn.Application.Selection.InlineShapes.AddPicture(e.ImageUrl);

}

Most feliratkozunk a BingSearchControl SelectedPicture eseményére, és az esemény törzsében a dokumentumunkhoz hozzáadunk egy képet. A képet mi a PictureEventArgs (e) –n keresztül kérdezzük le.

Elkészültünk a feladattal, itt az ideje kipróbálni: indítsuk el a bővítményt (F5), és keressünk rá egy tetszőleges szóra!

image

Ebben a feladatban már egy összetett Word Task Pane bővítményt írtunk, ráadásul WPF-be, és szolgáltatást hívtunk a háttérben. Bár maga a feladat nem rövid, mégis viszonylag egyszerű és látványos az eredménye, és jól látni, hogy saját Task Pane-t írni elég egyszerű folyamat. Egyedül a kontroll funkcionalitása bonyolíthatja az elkészítését.

Teljes kódsorok

BingSearchControl.xaml

<UserControl x:Class="WordBingSearchDemo.BingSearchControl"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;

             mc:Ignorable="d" Width="300">

    <UserControl.Resources>

        <Style TargetType="ListBoxItem">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ListBoxItem">

                        <Border x:Name="ItemBorder" BorderBrush="Black" Background="LightGray" BorderThickness="4" CornerRadius="5" Margin="5">

                            <ContentPresenter Margin="2" />

                            <Border.Effect>

                                <DropShadowEffect/>

                            </Border.Effect>

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="True">

                                <Setter TargetName="ItemBorder" Property="BorderBrush" Value="Red" />

                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="True">

                                <Setter TargetName="ItemBorder" Property="BorderBrush" Value="Blue" />

                            </Trigger>

                            <MultiTrigger>

                                <MultiTrigger.Conditions>

                                    <Condition Property="IsMouseOver" Value="False" />

                                    <Condition Property="IsSelected" Value="False" />

                                </MultiTrigger.Conditions>

                                <Setter TargetName="ItemBorder" Property="Opacity"  Value="0.80" />

                            </MultiTrigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

    </UserControl.Resources>

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <TextBox Grid.Row="0"  Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="txtSearch" VerticalAlignment="Top" Width="193" />

        <Button Grid.Row="0" Content="Bing It!" Height="23" HorizontalAlignment="Left" Margin="213,12,0,0" Name="btnBing" VerticalAlignment="Top" Width="75" Click="btnBing_Click" />

        <ListBox Grid.Row="1" Name="lstResult"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="lstResult_SelectionChanged">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Image Height="64" Width="64" Stretch="UniformToFill" Source="{Binding MediaUrl}" />

                </DataTemplate>

            </ListBox.ItemTemplate>

 

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <WrapPanel />

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

        </ListBox>

    </Grid>

</UserControl>

 

BingSearchControl.Xaml.cs

public partial class BingSearchControl : UserControl

{

    public delegate void SelectedPictureEventHandler(object sender, PictureEventArgs e);

    public event SelectedPictureEventHandler SelectedPicture;

 

    BingPortTypeClient bingClient;

    SearchRequest sRequest;

    public BingSearchControl()

    {

        InitializeComponent();

        bingClient = new BingPortTypeClient();

        sRequest = new SearchRequest();

        sRequest.AppId = "A6233E8DAB………";

        sRequest.Sources = new SourceType[] { SourceType.Image };

    }

 

    private void btnBing_Click(object sender, RoutedEventArgs e)

    {

        ImageRequest imgRequest = new ImageRequest();

        imgRequest.Filters = new String[] { "Size:Small" };

        imgRequest.Count = 50;

        imgRequest.CountSpecified = true;

        sRequest.Image = imgRequest;

        sRequest.Query = txtSearch.Text;

 

        SearchResponse response = bingClient.Search(sRequest);

 

        lstResult.ItemsSource = response.Image.Results;

 

    }

 

    private void lstResult_SelectionChanged(object sender, SelectionChangedEventArgs e)

    {

        ImageResult selected = lstResult.SelectedItem as ImageResult;

 

        if (selected != null && SelectedPicture != null)

        {

            SelectedPicture(this, new PictureEventArgs() { ImageUrl = selected.MediaUrl });

        }

    }

}

PictureEventArgs.cs

public class PictureEventArgs : EventArgs

{

    public string ImageUrl { get; set; }

}

 

ThisAddIn.cs

public partial class ThisAddIn

{

    private void ThisAddIn_Startup(object sender, System.EventArgs e)

    {

        UserControl taskPane = new UserControl();

        BingSearchControl bingControl = new BingSearchControl();

        bingControl.SelectedPicture +=new BingSearchControl.SelectedPictureEventHandler(bingControl_SelectedPicture);

        taskPane.Controls.Add(

            new ElementHost {

                Child = bingControl,

                Dock = DockStyle.Fill }

                );

 

        Microsoft.Office.Tools.CustomTaskPane myTaskPane = CustomTaskPanes.Add(taskPane, "Bing Search");

        myTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight;

        myTaskPane.Visible = true;

        myTaskPane.Width = 307;          

    }

 

    void bingControl_SelectedPicture(object sender, PictureEventArgs e)

    {

        Globals.ThisAddIn.Application.Selection.InlineShapes.AddPicture(e.ImageUrl);

    }

 

 

Függelék

Bizonyos esetekben, amikor elindítjuk a Word-öt, a bővítményünk nem töltődik be, csak egyszerűen elindul a Word. Előfordulhat olykor az is, hogy magát a Template-et sem engedi betölteni. Ilyenkor az alábbi lépésekkel lehet elhárítani a hibát:

Indítsunk el egy Word alkalmazást: File -> Options -> Add-Ins. Az ablak alján válasszuk ki a COM Add-ins –t és kattintsunk a Go gombra!

image

A megjelenő COM Add-Ins ablakban a Visual Studio Tools for Office Design-Time Adapter for Word legyen bepipálva (Értelemszerűen Excelnél vagy a többi Office alkalmazásnál szintén)!

image

Másik gyakori eset, hogy elindítjuk a bővítményünket, de nem töltődik be. Ez több okból is előfordulhat, de a leggyakoribb oka az, hogy történt egy kivétel, és az Office az adott bővítményt letiltotta. Ekkor válasszuk ki a File menü -> Options -> Add-ins menüpontot, a Manage elemek közül pedig a Disabled Items-et, majd kattintsunk a Go gombra! A megjelenő ablakban válasszuk ki (ha létezik) azt az elemet, ami le van tiltva és kattintsunk az Enable gombra (Célszerű ezután újraindítani a Word-öt)!

image

Ez a két leggyakoribb jelenség, de előfordulhat, hogy fejlesztés során mással is találkozhatunk. Bizonyos gépeken a Visual Studio 2010 Service Packja okozott problémát, máshol pedig a biztonsági beállítások. További hibajelenségekre választ az MSDN Office Development fórumán lehet találni.

Advertisements
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: