{"id":3705,"date":"2022-10-06T11:12:19","date_gmt":"2022-10-06T10:12:19","guid":{"rendered":"https:\/\/gdksoftware.com\/knowledgebase\/creating-a-custom-ui-with-devexpress"},"modified":"2026-01-13T13:44:53","modified_gmt":"2026-01-13T12:44:53","slug":"een-aangepaste-ui-maken-met-devexpress","status":"publish","type":"knowledge","link":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress","title":{"rendered":"Een aangepaste UI maken met DevExpress"},"content":{"rendered":"<h2>Introductie<\/h2>\n<p>Onlangs hebben we gewerkt aan een project waarbij we een volledig aangepaste gebruikersinterface moesten maken. Het doel van dit project was om een UI te maken die sterk lijkt op een moderne webapplicatie.<\/p>\n<p>DevExpress is buitengewoon handig geweest in dit proces. We hebben veel componenten kunnen aanpassen met behulp van een aangepaste skin die we hebben gemaakt met de DevExpress skin editor. Het is een hulpmiddel waarmee de gebruiker bijna elk aspect van standaard Delphi en DevExpress componenten kan aanpassen.<\/p>\n<p>Ik zal het aanpassen van een enkel component bespreken als voorbeeld van het gebruik van de skin editor.<\/p>\n<h2>Skin editor<\/h2>\n<p>Met je DevExpress licentie krijg je toegang tot de dxSkinEditor. De SkinEditor bevindt zich in je DevExpress installatiemap. Na het openen ervan kun je een nieuw project maken met een van de standaard DevExpress sjablonen. Voor dit voorbeeld wordt de basisknop gewijzigd in een aangepaste donkere modus styling.<\/p>\n<p>In het zijpaneel aan de linkerkant vind je de productgroepen. Deze bevatten de componenten die kunnen worden bewerkt gesorteerd in groepen. De knop komt te staan onder Algemeen &gt; Knop. Na het selecteren van de knop kom je deze instellingen tegen:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-3631 aligncenter\" src=\"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png\" alt=\"\" width=\"605\" height=\"165\" srcset=\"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png 605w, https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1-300x82.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/p>\n<p>Hier heb je alle gangbare eigenschappen die je in Delphi hebt, maar we kunnen ook de afbeelding veranderen. Hierdoor kun je bijvoorbeeld afgeronde hoeken op de knoppen hebben. In de eerste dropdown links zie je alle states die gevuld moeten worden. Voor de knop zijn deze toestanden: Normaal, Hot, Pressed, Disabled, Active en Checked. Voor dit voorbeeld gebruik ik de volgende afbeelding om deze staten te vullen.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-3637 aligncenter\" src=\"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin2.png\" alt=\"\" width=\"44\" height=\"132\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>De aangepaste skin gebruiken<\/h2>\n<p>Nadat je je wijzigingen hebt aangebracht, moet je je aangepaste skin samenstellen. De SkinEditor slaat het ontwerp op in de volgende bestanden:<\/p>\n<ul>\n<li>Compiled resource file (.RES file).<\/li>\n<li>Unit file (.PAS file).<\/li>\n<li>Delphi package files (.DPK file).<\/li>\n<\/ul>\n<p>Om de aangepaste skin in je eigen project te gebruiken moet je het volgende doen:<\/p>\n<ul>\n<li>Plaats de .RES en .PAS in je projectenmap.<\/li>\n<li>Geef de naam van de unit op in de &#8220;uses&#8221; clause en installeer het skinpakket in de IDE. Dit werkt zoals elk ander package door er met de rechtermuisknop op te klikken en het te installeren.<\/li>\n<li>Voeg een TdxSkinController toe aan je form.<\/li>\n<li>Pas de skin toe op een specifieke component onder de eigenschap &#8220;LookAndFeel.SkinName&#8221;.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-3634\" src=\"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin3.png\" alt=\"\" width=\"304\" height=\"148\" srcset=\"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin3.png 304w, https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin3-300x146.png 300w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"featured_media":0,"parent":0,"template":"","class_list":["post-3705","knowledge","type-knowledge","status-publish","hentry","knowledge-category-delphi"],"acf":{"author":595,"type_hero":"compact","hero_image":3634,"hero_image_position":"","hero_title":"Creating a custom UI with DevExpress","hero_content":"","hero_link":null,"hero_show_h1":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Een aangepaste UI maken met DevExpress - GDK Software<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Een aangepaste UI maken met DevExpress\" \/>\n<meta property=\"og:description\" content=\"Introductie Onlangs hebben we gewerkt aan een project waarbij we een volledig aangepaste gebruikersinterface moesten maken. Het doel van dit project was om een UI te maken die sterk lijkt op een moderne webapplicatie. DevExpress is buitengewoon handig geweest in dit proces. We hebben veel componenten kunnen aanpassen met behulp van een aangepaste skin die [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress\" \/>\n<meta property=\"og:site_name\" content=\"GDK Software\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-13T12:44:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"605\" \/>\n\t<meta property=\"og:image:height\" content=\"165\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress\",\"url\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress\",\"name\":\"Een aangepaste UI maken met DevExpress - GDK Software\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/gdksoftware.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Skin1.png\",\"datePublished\":\"2022-10-06T10:12:19+00:00\",\"dateModified\":\"2026-01-13T12:44:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress#primaryimage\",\"url\":\"https:\\\/\\\/gdksoftware.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Skin1.png\",\"contentUrl\":\"https:\\\/\\\/gdksoftware.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Skin1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\\\/een-aangepaste-ui-maken-met-devexpress#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/gdksoftware.com\\\/nl\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Knowledgebase\",\"item\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Delphi\",\"item\":\"https:\\\/\\\/gdksoftware.com\\\/nl\\\/kennisbank-categorie\\\/delphi\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Een aangepaste UI maken met DevExpress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gdksoftware.com\\\/nl#website\",\"url\":\"https:\\\/\\\/gdksoftware.com\\\/nl\",\"name\":\"GDK Software\",\"description\":\"Zet de stip op je horizon\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gdksoftware.com\\\/nl?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Een aangepaste UI maken met DevExpress - GDK Software","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress","og_locale":"nl_NL","og_type":"article","og_title":"Een aangepaste UI maken met DevExpress","og_description":"Introductie Onlangs hebben we gewerkt aan een project waarbij we een volledig aangepaste gebruikersinterface moesten maken. Het doel van dit project was om een UI te maken die sterk lijkt op een moderne webapplicatie. DevExpress is buitengewoon handig geweest in dit proces. We hebben veel componenten kunnen aanpassen met behulp van een aangepaste skin die [&hellip;]","og_url":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress","og_site_name":"GDK Software","article_modified_time":"2026-01-13T12:44:53+00:00","og_image":[{"width":605,"height":165,"url":"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"3 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress","url":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress","name":"Een aangepaste UI maken met DevExpress - GDK Software","isPartOf":{"@id":"https:\/\/gdksoftware.com\/nl#website"},"primaryImageOfPage":{"@id":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress#primaryimage"},"image":{"@id":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress#primaryimage"},"thumbnailUrl":"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png","datePublished":"2022-10-06T10:12:19+00:00","dateModified":"2026-01-13T12:44:53+00:00","breadcrumb":{"@id":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress#primaryimage","url":"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png","contentUrl":"https:\/\/gdksoftware.com\/wp-content\/uploads\/2022\/10\/Skin1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/gdksoftware.com\/nl\/kennisbank\/een-aangepaste-ui-maken-met-devexpress#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gdksoftware.com\/nl"},{"@type":"ListItem","position":2,"name":"Knowledgebase","item":"https:\/\/gdksoftware.com\/nl\/kennisbank"},{"@type":"ListItem","position":3,"name":"Delphi","item":"https:\/\/gdksoftware.com\/nl\/kennisbank-categorie\/delphi"},{"@type":"ListItem","position":4,"name":"Een aangepaste UI maken met DevExpress"}]},{"@type":"WebSite","@id":"https:\/\/gdksoftware.com\/nl#website","url":"https:\/\/gdksoftware.com\/nl","name":"GDK Software","description":"Zet de stip op je horizon","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gdksoftware.com\/nl?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/gdksoftware.com\/nl\/wp-json\/wp\/v2\/knowledge\/3705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdksoftware.com\/nl\/wp-json\/wp\/v2\/knowledge"}],"about":[{"href":"https:\/\/gdksoftware.com\/nl\/wp-json\/wp\/v2\/types\/knowledge"}],"acf:post":[{"embeddable":true,"href":"https:\/\/gdksoftware.com\/nl\/wp-json\/wp\/v2\/team\/595"}],"wp:attachment":[{"href":"https:\/\/gdksoftware.com\/nl\/wp-json\/wp\/v2\/media?parent=3705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}